Vue-router 路由生命周期

Vue-router 路由生命周期也叫导航守卫

分3块：全局守卫、路由独立守卫、组件内守卫

1、全局守卫 main.js

router.beforeEach((to, from, next) => {
  // 全局前置守卫
  // if(to.fullPath === '/shoppingCart'){
  //   //如果没有登录?对不起先去登录一下
  //   next('/login')
  // }

  console.log('1 beforeEach', to, from)
  next()

})
// 时间触发比 全局前置守卫慢些
router.beforeResolve((to, from, next) => {
  // 全局解析守卫
  console.log('3 beforeResolve', to, from)
  next()
})

router.afterEach((to, from) => {
  // 全局后置守卫、钩子
  console.log('4 afterEach', to, from)

})

 2、路由独立守卫 router.js

  {
    path: '/a',
    name: 'pageA',
    components:{
      default:pageA,
      ppp:Test
    },
    beforeEnter:(to,from,next)=>{
      console.log('2 beforeEnter',to,from)
      next()
    },
  },

3、组件内守卫  xxx.vue

export default {
  beforeRouteEnter(to,from,next){
    //这里 拿不到this
    // 路由跳转，使用此组件时触发
    console.log('beforeRouteEnter',to,from)
    next()
  },
  beforeRouteUpdate(to,from,next){
    //可以获取 this
    // /a/123 /a/456  当 组件被复用时，触发此方法
    console.log('beforeRouteUpdate',to,from)
    next()    
  },
  beforeRouteLeave(to,from,next){
    //可以获取this
    //路由跳转，不适用此组件时触发
    console.log('beforeRouteLeave',to,from)
    next()     
  }
}