最近在重温vue全家桶，感觉再看一遍记忆更深了，特地记录一下（本文vue-router版本为v3.x）。1.router-view是一个功能组件，用于渲染路径匹配的视图组件。它可以与和一起使用。如果两者一起使用，请确保在内层使用。如果设置了名称，就会渲染对应的路由配置中components下对应的组件。2.router-link标签支持用户在具有路由功能的应用中进行（点击）导航。属性类型描述toString/Object目标路由/目标位置对象replaceBoolean不留导航记录appendBoolean在当前路径后添加路径/a=>/a/btagString指定渲染哪个标签active-classStringClass3,redirect重定向根路由到loginconstrouter=newVueRouter({routes:[{path:'/',redirect:'/login'}]})动态返回重定向目标constrouter=newVueRouter({routes:[{path:'/a',redirect:to=>{//方法接收目标路由Asa参数//返回重定向的字符串路径/路径对象}}]})4、当路由别名路由访问/b时，URL会保持为/b，但是路由匹配会是/aconstrouter=newVueRouter({routes:[{path:'/a',component:A,alias:'/b'}]})5.路由参数props使用props，避免与$route过度耦合，这样可以直接在compone中使用propsnts接收参数5.1、布尔方式在路由后写入参数，并设置props为true{path:'/vuex/:id',name:'Vuex',component:()=>import('@/view/vuex'),props:true,mate:{title:'vuex'}}设置跳转中需要传递的参数params跳转toNext(){this.$router.push({name:'Vuex',params:{id:'99999'}})}在重定向的页面中，通过props或者this.$params获取参数props:{id:{type:String,default:''}}this.$params.id5.2,object方式将props设置为路由中的对象，携带静态数据{path:'/vuex',name:'Vuex',component:()=>import('@/view/vuex'),props:{id:'99999'},mate:{title:'vuex'}}跳转跳转toNext(){this.$router.push({name:'Vuex'})}在过去的页面中，使用props或者this.$params获取参数props:{id:{type:String,default:''}}this.$params.id注意：只有适用于静态数据5.3，function方式先在路由中设置props为Function，返回一个对象，无论是query参数还是params参数，都可以转化为props{path:'/vuex',name:'Vuex',component:()=>import('@/view/vuex'),props:route=>({id:route.query.id,age:route.params.age}),mate:{title:'vuex'}}jump跳转toNext(){this.$router.push({name:'Vuex',query:{id:'999999'},params:{age:'20'}})}在重定向页面中，通过props或this.$route.params/this.$route.query获取参数props:{id:{type:String,default:''},age:{type:String,default:''}}this.$route.querythis.$route.params6,routeguardrouteguard主要用来守卫跳转或取消导航6.1、全局pre-guardbeforeEach触发导航时，全局pre-guard按创建顺序调用。守卫是异步解析的，导航一直等到所有守卫都解析完。参数说明to即将从当前导航进入目标路由对象即将离开下一个回调方法next用法如下语法说明next()执行下一个钩子next(false)中断导航，如果URL有已经更改，重置为从地址next('/')中断当前跳转到其他地址，可以设置路由对象next(error)终止导航并将错误传递给onError()constrouter=newVueRouter({...})router.beforeEach((to,from,next)=>{//...})6.2、新增全局解析守卫beforeResolve2.5.0，与beforeEach类似，区别在于导航确认前，所有组件中的守卫和异步路由组件同时被解析后，调用解析守卫。router.eforeResolve((to,from,next)=>{//...})6.3、全局posthookafterEachpostguard不会接受next函数，不会改变导航本身router.afterEach((to,from)=>{//...})6.4、routeexclusiveguardbeforeEnter可以直接在路由配置上定义一个专用的beforeEnterguard，与全局preguard的method参数相同。constrouter=newVueRouter({routes:[{path:'/foo',component:Foo,beforeEnter:(to,from,next)=>{//...}}]})6.5,guardsinsidecomponentsbeforeRouteEnter守卫无法访问这个，因为守卫在确认导航之前被调用，所以即将出现的新组件还没有创建。可以通过将回调传递给next来访问组件实例。回调在确认导航时执行，组件实例作为回调方法的参数。constFooter={template:`...`,beforeRouteEnter(to,from,next){next(vm=>{//通过`vm`访问组件实例})}}beforeRouteUpdate(newin2.2)改变当前路由，但是组件在复用的时候会被调用，组件实例this是可以访问的。constFoo={template:`...`,beforeRouteUpdate(to,from,next){this.name=to.params.namenext()}}beforeRouteLeave导航离开组件对应路由时调用，通常用于禁止用户突然离开而不保存更改。它可以被next(false)取消。constFoo={template:`...`,beforeRouteLeave(to,from,next){constanswer=window.confirm('Areyousureyouwanttoleave')if(answer){next()}else{next(false)}}}6.6、完整的导航解析流程导航被触发。在停用的组件中调用beforeRouteLeave守卫。调用全局beforeEach守卫。在可重用组件中调用beforeRouteUpdate守卫(2.2+)。在路由配置中调用beforeEnter。解析异步路由组件。在激活的组件中调用beforeRouteEnter。调用全局beforeResolve守卫(2.5+)。导航已确认。调用全局afterEach挂钩。触发DOM更新。在beforeRouteEnter守卫中调用传递给next的回调函数，创建的组件实例会作为回调函数的参数传入。7.路由元信息在定义路由时，可以配置元对象字段来存储每条路由对应的信息。通过this.$route.meta访问，或者通过路由守卫中的to.meta和from.meta访问。constrouter=newVueRouter({routes:[{path:'/index',name:'Index',component:()=>import('@/view/index'),meta:{title:'主页',rolu:['admin','boss']}}]})8、转场动画只需要用transition标签包裹router-view标签即可，动画效果可以自己定义，参考用法过渡组件。也可以在父组件或者app.js中使用watch来监听$route的变化，根据不同的路由替换transition组件的name属性，实现不同的动画效果。监听手表：{'$route'(to,from){consttoD=to.path.split('/').lengthconstfromD=from.path.split('/').lengththis.transitionName=toD{setTimeout(()=>{resolve(savedPosition)},1000)})}else{return{x:0,y:0}}}})10、完整的路由配置首先导入vue和vue-router，然后使用router定义路由信息集，每个路由都是一个对象，对象有如下属性：属性类型值pathString组件路径信息nameString组件名称componentFunction组件mateObject元信息childrenObject子路由redirectString重定向propsBoolean/Object/Function参数传递具体代码如下:从'vue'导入Vue从'vue-router'Vue.use(VueRouter)constroutes=[{path:'/',redirect:'/index'},{path:'/index',name:'Index',component:()=>import(/*webpackChunkName:"index"*/'@/view/index'),mate:{title:'主页',auth:false}},{路径:'/login',name:'Login',component:()=>import(/*webpackChunkName:"login"*/'@/view/login'),meta:{title:'Login',auth:false},children:[{path:'children',name:'Children',component:()=>import(/*webpackChunkName:"children"*/'@/view/children'),mate:{title:'嵌套子路由',auth:false}}]}]constrouter=newVueRouter({mode:'hash',routes})exportdefaultrouter注意：嵌套的子路由必须放在嵌套页面的标签中如果查看如果发现有帮助，我是@齐多多，欢迎点赞关注评论；END之前的文章使用nvm管理node.js版本替换npm淘宝镜像源超详细！Vuex实战教程个人主页CSDNGitHub简书博客园掘金
