路由守卫的模式一般分为3种

全局路由守卫

1. 1 router.beforeEach 全局前置守卫，当一个导航触发时，全局前置守卫按照创建顺序调用。每次进入之前都会触发，共享组件，也就是动态路由，也会触发。一般在此钩子函数判断用户是否有权限进入该页面。一般后台管理系统流程如下： 是否登陆 --> 是 --> 判断是否存在元信息meta中的重新登陆，存在，跳转至登陆页面，不存在，放行。 是否登陆 --> 是 --> 判断是否存在元信息meta中的重新登陆，不存在，放行。 是否登陆 --> 否 --> 存在token，发送请求重新获取用户信息，成功，判断是否存在元信息meta中的重新登陆，存在，跳转至登陆页面，不存在，放行。 是否登陆 --> 否 --> 存在token，发送请求重新获取用户信息，失败，跳转至登陆页面。 是否登陆 --> 否 --> 不存在token，跳转至登陆页面。
2. 2 router.afterEach 全局后置守卫，渲染之前触发，一般少用，可以获取当前组件的this。
3. 3router.beforeResolve 全局解析守卫，可以获取相对应的信息，更加少用。

路由独享的守卫

动态路由时，不会再次执行，共享该路由组件的时候，再次进入不会再次触发，一般很少使用，用法如下：

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
      // reject the navigation
      return false
    },
  },
]

组件内的守卫

路由组件内直接定义路由导航守卫(传递给路由配置的)

1. 组件进入之前，只能通过next函数中第一个形参获取当前实例化的vue，也就是this。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

2. 组件离开之后，可以获取当前组件的this

beforeRouteLeave (to, from) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (!answer) return false
}

3. 组件复用的时候，只会执行beforeRouteUpdate，前两个钩子函数不会执行，同样可以获取到this指向，一般可在此重新初始化数据。

beforeRouteUpdate (to, from) {
  // just use `this`
  this.name = to.params.name
}

完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫(2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入