1.什么是vue-router？路由指的是单页应用的路径管理器，方便我们构建单页应用。Vue的单页应用是基于路由和组件的。路由用于设置访问路径并映射路径和组件。传统的界面跳转是通过a标签跳转到界面。我们在使用vue-router管理单页应用的时候，在切换界面的时候，就是路径之间的切换，也可以说是组件之间的切换。也就是说，路由模块的本质就是建立url和interface的映射关系。但是我们上面提到了传统的界面跳转方式是使用a标签进行界面跳转，那么我们在使用vue的时候还需要使用a标签进行界面跳转吗？答案是否定的，如果我们来到跳转界面，a标签就不行了，为什么呢？答案很简单。我们的项目是一个单页应用程序。使用a标签无法跳转到其他界面，但仍然可以访问外部链接。我们如何判断我们的项目是单页应用程序？当我们使用vue-cli搭建脚手架时，可以看到我们的项目中只有一个index.html。还有一个就是当我们输入命令npmrunbuild打包项目的时候，会生成一个dist文件夹，里面有静态文件包和index.html，此时也可以说明我们的Vue项目是一个单页应用时间。2.vue-router的实现原理和两种模式因为我们在上面提到和解释了单页应用，所以这里就不过多解释了。当我们在项目中使用vue-router时，它加载界面的时候，并不会加载整个界面，而是更新路由所在路径对应的组件。这样当我们切换路由时，不会重新请求接口，而是通过不同的路径请求不同的资源。在vue-router中的单页面应用中，也有两种方式：Hash模式和History模式，vue-router中默认的模式是hash模式。哈希模式当vue-router使用哈希模式时——url的哈希用来模拟一个完整的URL，所以当URL改变时，页面不会重新加载。哈希（#）是URL的锚点，代表网页中的一个位置。只需更改#后面的部分，浏览器会跳转到相应的位置而不用重新加载界面，因为HTTP请求中不包含##后面的部分，所以在URL中添加锚点#不会影响服务器端，但是每次路由重定向的时候，#后面的部分都会改变。此时浏览器的历史记录中会增加一条记录，点击后退按钮或者使用$router.back()返回界面。History模式官方文档：如果你不想要难看的hash，我们可以使用routinghistory模式，它充分利用了history.pushStateAPI来完成URL跳转而无需重新加载页面。`这里插入代码片段constrouter=newVueRouter({mode:'history',//此时使用history模式routes:[...]//路由配置})因为在使用hash模式时，它将在Url路径中添加锚点，如果想在不添加锚点的情况下使用普通的Url，我们还是要用好这个模式，这个模式充分利用了history.pushState来完成Url的跳转而不加载界面。3.如何安装配置vue-router安装在终端输入npminstallvue-router--save下载vue-router（前提需要已经安装node.js），可以看到已经添加了vue-到package.json文件路由器依赖项。配置1.在src中新建一个文件index.js（可以任意取名，在main.js中导入即可）2.在index.js文件中引入包，声明使用vue-routerimport来自'vue'的Vue；//从'vue-router'引入vueimportVueRouter;//引入vue-routerVue.use(VueRouter)//声明使用插件暴露vue-router对象：exportdefaultnewVueRouter({routes:[{path:'/xxx',//Pathcomponent:HelloWorld,//声明componentmeta:{value:true//此时$route.meta中会有一个value属性},//传入参数children:[{path:'/xxx/ccc',component:HelloChildren//声明subcomponents}]},{/*默认指向*/path:'/',redirect:'/xxx'//默认指向的路径},]})3.在mainApplicationroutingin.jsimportrouter来自'./index.js'；//from之后就是上面index.js的路径newVue({el:'#app',render:h=>h(App),router,/*使用vue-router导入路由*/})4.在App.vue中引入路由组件router-link默认会被渲染为a标签链接正确的可以通过tag属性配置成另一个标签，也可以添加其他属性给我们的开发带来方便。下面介绍前三个属性，多余的属性可以查看官方文档：to属性用于指定跳转的路径。路径的内容在上面的index.js中已经配置好了。以上三个属性是根据环境选择性添加的。tag：可以指定将router-link标签渲染到Component中，上面的配置会将router-link渲染为li标签元素，因为tag="li"。replace：这样跳转到路由时就不会留下历史记录了。指定replace时，不会返回上一个界面，而是返回上一个界面（如果上一个界面也设置为replace，则返回上一个界面）。active-class，当点击路由成功跳转到路由时，该样式会被添加到active路由中。该操作可用于切换导航菜单栏的样式。这里还有一些其他的属性，具体可以参考官方文档。关于router-link中的参数传递，下面会介绍router-link属性的官方文档入口。view，那么router-view有什么用呢？router-view用于渲染路由映射的组件。当router-link中的路径发生变化时，相应渲染的router-view中的内容也会发生变化，从而实现路由跳转无需刷新。下面举个例子，这就是app.vue中为什么会出现router-view标签，这是我们常见的原因。先不说上图。可以看到我们在App.vue中应用了router-view标签，所以这时候就要考虑一下了。我们在App.vue文件中只有这个标签，那么内容映射从哪里来呢？这时候我们就找到了上面我们在index.js中配置的路由。这里是我们在App.vue中对应路径渲染的组件。默认的指向位置是Msite组件，也就是我们的初始界面。在初始化界面中，我们可以使用router-link跳转到其他路径的界面或者this.$router.replace()的方法替换括号中传递的路径进行界面跳转。例如：this.$router.replace('/search')。5、vue-router中的参数传递当我们点击router-link时，内部会调用router.push()方法，所以可以说当我们使用时它等于使用路由器。推送（）方法。首先我们使用vue.jsdevtoolsGoogle插件查看路由中可以传递哪些参数？可以看出$router中有path、query、params、fullpath、name、meta等属性，这些属性可以在index.js中配置，也可以通过router-link、router.push方法参数传递。?而name属性还有meta属性，我们可以通过$route.name和$route.meta来获取我们传递的属性，但是我们可以看到在index.js中配置的query和params并没有显示在$router中，而只有name和metaattributes和其他属性，即params和query属性不能在index.js中传递。那么在哪里传递这些属性呢？我们将在下面介绍。1、查询参数：通过可以看到已经通过queryPassed到$route对象，也可以通过$router.query调用这个参数。当然，上面的方法也可以改成按名字传参``也可以用url传参。例如：login以上传递参数的方法等同于this.$router.push('/shop/goods?id=1&user=liu')this.$router.push({path:'/shop/goods',query:{id:1,user:'liu'}})this.$router.push({name:'goods',query:{id:5,user:'liu'}})//这个方法是通过匹配名字来回传递参数。2.params传参：对于paramurl传参，我们的index.js需要进行如下配置，将path配置为path:'/msite/:id/:name'对于url传参，我们可以这样Passlogin这时候把id=1,user=liu参数传入路由，但是在使用params传参的时候也需要知道,不能使用path导入路由，只能通过名称导入路由，名称导入路由与查询参数相同。6、$route和$router的区别我们在使用vue-router的时候，经常会操作$router和$route这两个对象，那么应该如何操作这两个对象呢？两个对象的作用是什么？让我们带着问题来研究它。$route$route表示当前的路由信息??，包含了解析当前url得到的信息。包含当前路径、参数、查询对象、hash值、fullpath全路径、匹配的数组、当前路径的name名称、meta路由元信息。我们可以通过$route.name（或者meta等其他属性）来获取对应的值，从而实现一些功能。$router$router对象是全局路由的实例，是router构造方法的实例对象。那么路由的实例方法包括push、replace和go方法。三个方法的使用如下：this.$router.push('/msite')//对应的路径在括号里。对于上面提到的push方法，this.$router暂时不会列出来。replace('/miste')this.$router.go(-1)//传入-1时为fallback，也可以传入其他值，会有不同的用法。使用push方法时，会在历史栈中添加一条记录，点击返回或者使用this.$router.back()方法返回。可以应用于导航的回滚（将回滚图片绑定到rollback方法上，这样点击后回滚到之前在历史记录中添加记录的界面）。使用replace跳转到界面不会在历史栈中添加新记录，因为之前的界面没有添加历史记录，所以点击back会返回到之前的界面（之前的界面必须是添加了记录的界面在历史中，否则向上查找，直到找到在历史中添加记录的接口）使用go方法相当于从当前接口向前或向后跳转n个接口，n代表go方法中传递的值。//传入正数表示前进，传入负数表示后退this.$router.go(1)//等于在历史记录中往前走this.$router.go(4)//等于历史记录往前走了三步this.$router.go(100)//当历史记录不够时，只能面临失败，负数也是一样Thenatthis点，总结到此结束。如果对你有帮助，请点个赞。欢迎发表评论。
