路由钩子的使用

1、在路由router-index.vue 里面使用的全局路由钩子  和组件 局部的路由钩子  

这是全局的路由组件   router.beforeEach  进入前   router.afterEach 是进入以后

router.beforeEach((to,from,next)=>{
    if(to.path === '/center'){
        if(localStorage.getItem('token')){
            next()
        }
        else{
            next('/login')
        }
    }else{
        next()
    }
})

 //beforeEach 进入前 afterEach
router.beforeEach((to,from,next)=>{
  if(from.path === '/center'){
      console.log('from',to)
  }
  next()
})

　2、　在 router-index.vue中的 局部路由钩子   beforeEnter

   {
        path:'/center',
        component:resolve => require(['view/center/index.vue'],resolve),
        // beforeEnter((to,from,next){
        //     console.log('tofrom',to,from)
        //     next()
        // })
    },

　　3、便是在单文件组件里面的 路由钩子

  // beforeRouteEnter(to,from,next){
  //   console.log('beforeRouteEnter进入')
  //   next()
  // },
  // beforeRouteLeave(to,from,next){
  //   console.log("beforeRouteLeave离开")
  //   next()
  // }

// beforeRouteEnter    beforeRouteLeave 

// beforeRouteUpdate  在复用详情页面 不同的id 的时候才会有用