Vue使用路由钩子拦截器beforeEach和afterEach监听路由

// router.jsconst router = new Router({
 routes: [
  {
   path: '/',
   name: 'sideBar',
   ponent: sideBar,
   children:[
    {
     path:'/',
     name:'sort',
     ponent:sort
    },
    {
     path:'/addNewSort',
     name:'addNewSort',
     ponent:addNewSort
    },
    {
     path:'/notSend',
     name:'notSend',
     ponent:notSend
    },
    {
     path:'/sended',
     name:'sended',
     ponent:sended
    },
  }
 ]
})

router.beforeEach((to,from,next)=>{
 // console.log("to:",to);   // router即将进入的路由对象
 // console.log("from:",from); // 当前导航即将离开的路由
 // console.log("next:",next); // Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
 if(to.name=='notSend'){
  next({
   name:'sort'
  })
  return
 }
 next()
})

export default router

// router.jsconst router = new VueRouter({
 routes: [
  {
   path: '/login',
   ponent: Login,
   beforeEnter: (to, from, next) => {
    // ...
   },
   beforeLeave: (to, from, next) => {
    // ...
   }
  }
 ]
})

// .vuebeforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

beforeRouteLeave(to, from, next) {
  next()
},
beforeRouteEnter(to, from, next) {
  next()
},
beforeRouteUpdate(to, from, next) { // 用于相同路由组件的的参数更新
  next()
},
data:{},
method: {}