路由守卫相关知识

路由守卫主要分为全局守卫、路由独享守卫、组件内守卫。

全局守卫

beforeEach、beforeResolve、afterEach

router.beforeEach((to, from, next) => {
    // do someting
});

全局前置守卫
作用：跳转前进行判断拦截

router.afterEach((to, from) => {
    // do someting
});

全局后置守卫
作用：跳转后进行操作

路由独享守卫

beforeEnter

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

组件内守卫

beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

beforeRouteEnter(to, from, next) {
  next (vm => {
    // 这里通过 vm 来访问组件实例解决了没有 this 的问题（beforeRouteEnter 不能获取组件实例 this）
  })
  // do someting  // 在渲染该组件的对应路由被 confirm 前调用
},
beforeRouteUpdate(to, from, next) {
  // do someting
  // 在当前路由改变，但是依然渲染该组件是调用
},
beforeRouteLeave(to, from ,next) {
  // do someting
  // 导航离开该组件的对应路由时被调用
}