Vue的生命周期总结和router的生命周期

1. 根组件实例：8个
   (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)
   组件实例：8个
   (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)
   全局路由钩子：2个 (beforeEach、 beforeResolve、afterEach) 组件路由钩子：3个
   (beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)
   路由独立守卫:1个(beforeEnter) 指令的周期： 5个
   (bind、inserted、update、componentUpdated、unbind)
   beforeRouteEnter的next所对应的周期 nextTick所对应的周期

**
Vue-router 路由生命周期也叫导航守卫
分3块：全局守卫、路由独立守卫、组件内守卫
全局守卫 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)
 
})

路由独立守卫 router.js

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

组件内守卫 index.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()     
  }
}