一、VueRouter简介VueRouter是Vue.js官方的路由管理器。轻松构建单页应用前端配置路由的优缺点：优点：响应速度快，不需要经过服务器缺点：不利于SEO使用浏览器的后退按钮重新发送请求，并且没有合理使用缓存。vue-router#进入项目安装，保存到依赖$npmivue-router-S2。准备路由配置文件router/index.js.├──App.vue//父组件├──main.js//入口文件├──components│└──kid1.vue//子组件├──router//routing│└──`index.js`//路由配置文件└──assets└──logo.png3.配置参考插件（1）编写router/index.jsimport导入插件；Vue.use使用插件；newVuex.router实例化一个Vuex对象；exposes//引入依赖importVuefrom'vue'importVueRouterfrom'vue-router'//引入所有组件importHomefrom'./views/Home.vue'//使用插件Vue.use(VueRouter);//实例化并暴露exportdefaultnewVueRouter({mode:'history',//Default是hash模式。routes:[{path:"/",name:"Home",//可选组件:Home//正常加载},{path:'/Foo',name:'Foo',component:import('./Foo.vue')//路由懒加载异步加载组件},{path:'/admin/:userId',//配置动态路由name:'GoodsList',component:GoodsList,children:[//嵌套路由{path:'detail',name:'detail',component:Detail}]}]})(2)入口文件导入仓库main.js，在单页应用入口文件中引用，所有子组件都可以叫做。importVuefrom'vue'importrouterfrom'./router'//导入仓库//导入各种组件importAppfrom'./App'newVue({el:'#app',router,//挂载仓库组件:{App},template:``})(3)使用路由#实现跳转：1.标签路由转到Foo//Renderedas``tocontentshouldmatchthepathconfiguredbytheroute属性说明：totargetroutereplace变成replacemode，即没有记录添加到historyappendaddbasepathtagbeforetopathwhattagrenderedFor示例：foo"呈现为"foo------------------------------------2。程序化路由vm.$router.push({path:""})vm.$router.replace()vm.$router.go()vm.$router.black()vm.$router.forward()#路由view:3.动态路由匹配路径配置匹配路径$router.params/user/:username/user/evan{username:'evan'}/user/:username/post/:post_id/user/evan/post/123{username:'evan';post_id:'123'}/user/*user/1,user/2,userr/1/10都可以匹配说明：通配符(*)/user-*user-a说明：匹配以/user-开头任意路径4.嵌套路由constrouter=newVueRouter({routes:[{path:'/user/:id',component:User,children:[//当/user/:id匹配成功时，//UserHome会是renderedinUser's{path:'',component:UserHome},//...othersub-routes]}]})五、程序化导航$router.push()跳转并添加一条新记录到history$router.push("name")//string$router.push({path:"name"})//object$router.push({path:"name?a=123"})//参数后面直接是问号$router.push({path:"name",query:{nums:123,class:9}})也可以单独卸载query中的$router.replace()跳转不跳转toAddnewrecordstohistory$router.replace(location,onComplete?,onAbort?)这和push很像，但是这样不会往history中添加新记录$router.go(n)向前几页或者几页落后的$router。go(n)前进或后退几页$router.back()$router.forward()$router.resolve()打开一个新窗口letrouteUrl=this.$router.resolve({path:"/share",查询:{id:96}});window.open(routeUrl.href,'_blank');$router.addRoutes动态添加路由规则例如：vue权限管理六、命名路由和命名视图：命名路由：给路由定义不同的名字，根据名字进行匹配；购物车</router-link>watch监控$route变化//然后在父组件中//watch$route决定使用哪个transitionwatch:{'$route'(to,from){consttoDepth=to.path.split('/').lengthconstfromDepth=from.path.split('/').lengththis.transitionName=toDepth缓存组件而不重新加载包含字符串或正则表达式。白名单。exclude-字符串或正则表达式。黑名单。最大-数字。可以缓存的最大组件实例数。参考资料：官网：https://router.vuejs.org/zh/路由守卫：https://blog.csdn.net/bingqis...使用Vue-Router2实现路由功能：https://blog。csdn.net/sinat_1...
