VUE中路由概览

 1，router-link 属性

 

2，重定向 redirect const router = new VueRouter({ routes: [ {path:'/', redirect: '/login'} ] }) 动态返回重定向目标 const router = new VueRouter ({ routes: [ {path: '/a', redirect: to => { //方法接收，目标路由，作为参萨湖 // return 重定向得 字符串路径.路径对象 } ] })

3， 路由别名 路由访问/b 时， url会保持为/b， 但是路由匹配为/a const router = new VueRouter ({ ruotes: [ {path: '/a', comonpent: A,alias:'/b'} ] })

4，路由传参，props 6， 路由守卫 全局前置守卫，beforeEach 当一个导航出发{{{得时候}}}，全局前置守卫按照创建顺序调用，守卫是异步解析执行，此时导航在所有守卫解析完之前一直处于等待中， const router = new VueRouter({........}) router.beforeEach((to,from,next) => { //,,,,,,,,, })

5.全局解析守卫beforeResolve 在导航被{{{确认之前}}}，同时在所有组件内守卫和一部路由组件被解析之后，解析守卫就会被调用 6.3 全局后置钩子函数afterEach 后置守卫不会接收next函数也不会改变导航本身 router.afterEach((to,from) => { // ........ })

5.路由独享守卫beforeEnter 可以在配置路由上直接定义专属得beforeEnter守卫，与全局前置守卫得方法参数一样的

beforeEnter实例，本人项目中遇到的

 导航栏中的新建和修改公用路由，通过传入不同的id，来现实是新建还是修改，

 

 

6.组件内的守卫 beforeRouteEnter 改守卫不能访问this，因为守卫在导航确认前被调用，因此即将登场的新组建还没被创建，可以通过传一个回调给next来访问组件内，在导航被确认的时候执行回调并且把组件实例作为回调方法的函数， beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用，可以访问组件实例this beforeRouteLeave 导航离开该组件的对应路由时调用，通常用来禁止用户在还未保存修改前突然离开。可以通过next(false)来取消。

 

 

7. 导航先被触发，在组件里面先调用beforeRouteLeave守卫，之后调用全局的beforeEach守卫，在宠用的组件里调用beforeRouteUpdate，在路由配置里调用beforeEnter，解析异步路由组件，在被激活的组件里调用beforeRouteEnter 调用全局的beforeResolve守卫，导航被确认，调用全局的afterEach钩子， 出发DOM更新，调用beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入，

8.路由的meta对象字段，用来储存每个路由对应的信息，通过this.$route.meta来访问，或者在路由守卫中通过to.meta和 from.meta访问

9.过度动效 使用transition标签包裹住router-view标签，动画效果自己定义，也可以监听watch，随意发挥。

10.滚动行为 router可提供一个scrollBehavior，并接收to和fron路由对象 完整的路由配置