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