vue路由守卫的执行顺序

全局路由导航守卫：beforEach afterEach
路由独享导航守卫：beforEnter
组件内导航： beforRouteEnter beforeRouteUpdate beforeRouteLeave
beforEach 与 beforEnter 的区别：前置针对所有路由，后者针对当前路由

切换界面时，从 test界面 到 about界面。
【组件】前一个组件的beforeRouteLeave
【全局】beforeEach
【组件】（路由参数发生变化）触发beforRouterUpdate
【配置文件，即router.js文件中写在路由配置的地方】beforEnter
【组件】组件内部声明的beforeRouteEnter
【全局】afterEach

  {
    path: '/list',
    name: 'list',
    component: () => import('@views/List'),
    children: [
      {
        path: ':id',
        name: 'details',
        component: () => import('@views/Details'),
        props: true,
        beforeEnter: (to, from, next) => {
          console.log('路由独享守卫 beforeEnter')
          next()
        }
      }
    ]
  }

beforeRouteEnter(to,form,next){
      console.log(this)//访问不到this
      next(vm=>{
          console.log(vm)//vm为vue实例,此时vm为this
      })
}
beforeRouteUpdate(to,form,next){
     next()
     
}
beforeRouteLeave(to,form,next){
     next()
}

next()详解

• next()
  没有参数，表示可以进入到to的路由中；
• next(false)
  参数为一个布尔值false，中断当前的导航，回到from路由；
• next(’/’) 或 next({ path: ‘/’ })
  参数为一个路径，相当于执行了this.$router.push(’/’)
• next(error)
  参数为error，中断当前导航，将该错误传递给router.onError()注册过的回调。