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