vue路由守卫详解

一、分类：全局守卫、路由独享守卫、组件内路由守卫

　　全局守卫：

router.beforeEach((to, form, next) => {
  console.log('全局前置守卫 beforeEach')
  next()
})
router.beforeResolve((to, form, next) => {
  console.log('全局解析守卫 beforeResolve')
  next()
})
router.afterEach((to, form) => {
  console.log('全局后置守卫 afterEach')
})

　　使用场景：

　　　　全局前置守卫：用于登录时验证token是否有效、开启进度条 NProgress
　　　　全局解析守卫：
　　　　全局后置守卫：关闭进度条

　　路由独享守卫：

  {
    path: '/list',
    name: 'list',
    alias: '/aaa',
    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, from, next) {
    console.log('组件内路由前置守卫 beforeRouteEnter', this) // 访问不到this
    next((vm) => {
      console.log('组件内路由前置守卫 vm', vm) // vm 就是this
    })
  },
  beforeRouteUpdate(to, from, next) {
    console.log('组件内路由更新守卫 beforeRouteUpdate')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('组件内路由离开守卫 beforeRouteLeave', this)
    next()
  }

 　　使用场景：

　　　　组件内前置守卫：在进入当前路由前，对页面某一部分组件进行刷新，可以通过改变key值的方式进行刷新，具体见  vue详情页回到列表页定位到之前位置（keep-alive）

　　　　*组件内路由更新守卫：

　　　　　　在vue官网中有过介绍：

　　　　　　

　　　　　　他的意思是说，当使用动态路由传值时，/user/1 和 /user/2 使用的是同一个组件，那么既然使用了同一个组件，vue或默认复用这个组件，也就是他相当于使用了keep-alive缓存，不会经历创建和销毁的那一套流程，所以路由参数发生变化了，组件没有反应。对应的解决办法有两种：

 

　　　　　　

　　　　组件内路由离开守卫：在退出时询问需不需要保持至草稿箱，或者询问当前未支付，是否留下支付完再走

二、路由的执行顺序：

　　全局前置守卫 beforeEach

　　路由独享守卫 beforeEnter

　　组件内路由前置守卫 beforeRouteEnter

　　全局解析守卫 beforeResolve

　　全局后置守卫 afterEach

　　组件生命周期：创建前 beforeCreate

　　组件生命周期：创建后 created

　　组件生命周期：挂载前 beforeMount

　　组件内路由前置守卫 beforeRouteEnter 的 next 回调
　　组件生命周期：挂载后 mounted

三、路由守卫的参数：

　　to：路由要去哪儿

　　from：路由来自哪儿

　　next：是一个函数，路由守卫中一定要调用这个函数来使当前路由状态为 reslove。执行的效果由next函数中的参数决定，它的参数有以下4种情况：

　　　　next()：没有参数，表示可以进入到to的路由中

　　　　next(false)：参数为一个布尔值false，中断当前的导航，回到from路由

　　　　next('/') 或 next({ path: '/' })：参数为一个路径，相当于执行了this.$router.push('/')

　　　　next(error)：参数为error，中断当前导航，将该错误传递给router.onError()注册过的回调

　　注意：必须要确保next函数在任何给定的导航守卫中都被调用过一次。它可以出现多次，但是只能在所有的逻辑路径都不重叠的情况下，否则会报错。

　　错误的案例：

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // 如果用户未能验证身份，则 `next` 会被调用两次
  next()
})

　　正确的写法：

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})