vue-router路由守卫

vue-router导航钩子

• vue-router导航钩子的主要作用是拦截导航，让路由完成跳转或者取消；
• 导航钩子分类：全局守卫、局部守卫、路由独享守卫；

全局守卫

• 指的所有路由配置的组建都会被触发的钩子；
• 钩子函数执行顺序：beforeEach、beforeResolve、afterEach；

// beforeEach：在路由跳转前触发，这个钩子作用主要是用于登录验证
const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
  // do someting
});
/* beforeResolve：这个钩子和beforeEach类似，也是路由跳转前触发，
   但它在在beforeEach和组件内beforeRouteEnter之后，afterEach之前调用。
*/
// afterEach：和beforeEach相反，它是在路由跳转完成之后触发
router.afterEach((to, from) => {
  // do someting
});

局部守卫

• 组件内执行的钩子函数，相当于为配置路由的组件添加的生命周期钩子函数；
• 钩子函数执行顺序：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave；

const comp = {
  template: `<div>This is file</div>`,
  beforeRouteEnter(to, from, next) {
    // do someting
    // 在渲染该组件的对应路由被 confirm 前调用
  },
  beforeRouteUpdate(to, from, next) {
    // do someting
    // 在当前路由改变，但是依然渲染该组件是调用
  },
  beforeRouteLeave(to, from ,next) {
    // do someting
    // 导航离开该组件的对应路由时被调用
  }
}

路由独享守卫

• 单个路由配置的时候也可以设置的钩子函数，且只能在这个路由下起作用；
• 它只有一个钩子函数beforeEnter；

cont router = new VueRouter({
  routes: [
  {
    path: '/file',
    component: File,
    beforeEnter: (to, from ,next) => {
      // do someting
    }
  }
  ]
});

组件路由跳转 - A路由–>B路由流程解析(局部-全局-独享-局部-全局)

• 在A组件里调用离开守卫，A组件中的beforeRouteLeave；
• 调用全局的beforeEach守卫， router.beforeEach；
• 再执行B路由配置里调用beforeEnter；
• 再执行B组件的进入守卫，B组件中beforeRouteEnter；
• 调用全局的beforeResolve守卫(2.5+)，router.beforeResolve；
• 导航被确认；
• 调用全局的afterEach钩子：router.afterEach；
• 触发DOM更新。