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() } }