导航守卫及组件内的守卫

平时守卫一般也就只用了全局解析守卫。记录一下其他的守卫，

导航守卫

const router = new VueRouter({ ... })

// 全局前置守卫
router.beforeEach((to, from, next) => {
    console.log('to, from,next: ', to, from, '前置');
    next()
})
// 全局解析守卫
router.beforeResolve((to, from, next) => {
    console.log('to, from,next: ', to, from, '解析');
    next()
})
// 全局後置鉤子
router.afterEach((to, from) => {
    console.log('to, from: ', to, from, '后置');

})

路由独享守卫

        {
            path: ':id',
            name: 'router1',
            component: () => import('../views/routerProps/components/router1'),
            meta: {
                title: "router1"
            },
            props: true,
            // 路由独享
            beforeEnter: (to, from, next) => {
                console.log('to, from: ', to, from, '路由独享');
                next()
            }
        }

组件内守卫

 // 进入路由
  beforeRouteEnter(to, from, next) {
    console.log("to, from: ", to, from, "进入路由前");
    // ...
    next();
  },
  // 离开路由时触发
  beforeRouteLeave(to, from, next) {
    console.log("to, from: ", to, from, "离开路由");
    next();
  },
  // 复用路由时触发
  beforeRouteUpdate(to, from, next) {
    console.log("to, from: ", to, from, "复用路由");
    next();
  },

路由导航守卫与组件守卫之间的执行顺序

进入路由前的执行顺序

离开路由后的执行顺序

 

 beforeRouteUpdate是跳转相同组件，不同路由下会触发如a1  => a2 组件相同这时就会触发