vue router 导航守卫

完整的导航解析流程

1. 触发路由导航。
2. 在失活的组件调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件内调用beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。 导航被确认。
9. 调用全局的 afterEach 钩子。
10. 触发 DOM 更新。
11. 用创建好的实例调用组件 beforeRouteEnter 守卫中传给 next的回调函数。

全局守卫

全局前置守卫

路由在跳转前执行
router.beforeEach(to,from,next)建立路由全局前置守卫

• to进入目标路由 对象
• from 离开的路由 对象
• next 执行以来参数
  next() 进入管道下一个路由
  next(false)终中断航。若URL改变，重置到from路由地址
  next({path:'login'}) / next('login')跳转到地址

router.beforeEach((to,from,next)=>{
 if (to.name !== 'Login' && !isAuthenticated) {
 		next({ name: 'Login' })
 		} else next();
});

全局后置钩子

router.afterEach( to,from)路由跳转完成之后执行。
这些钩子不会接受 next 函数也不会改变导航本身。

router.afterEach((to, from) => {
  
})

全局解析守卫

router.beforeResolve 注册一个全局守卫。和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

路由独享的守卫

路由配置上直接定义beforeEnter: (to, from, next) => {}

let router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => { //路由的独享守卫 是配置在路由内部
        // ...
      }
    }
  ]
})

组件内的守卫

在路由组件内直接定义以下路由导航守卫

• beforeRouteEnter(to, from, next)
• beforeRouteUpdate(to, from, next)
• beforeRouteLeave(to, from, next)

export default {
  beforeRouteEnter(to, from, next) {
    // 在进这个路由的守卫方法的时候 当前组件还没有被实例化
    //如果要访问当前组件的实例  可以在next里面写一个回调函数  获取到实例
    //next()  等组件渲染完成之后回去执行回调函数   把实例当参数返回
    next(vm=>{
        console.log(vm);//可以获取到当前组件的实例
    });
  },
  beforeRouteUpdate(to, from, next) {
    //当前的路由发生变化   改组被重复使用
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的路由的时候
    next();
  }
};