Vue Router系列之详解路由守卫

---

Vue Router 版本号为 v3.x

1、路由守卫是什么

官方是这么说的

导航守卫主要用来通过跳转或取消的方式守卫导航。

导航守卫其实就是路由跳转过程中的一些钩子函数，再直白点就是路由跳转是一个大的过程，这些大的过程分为路由前中后等等些小的过程，在这些小的过程中都有对应的函数，这些函数定义了做一些事情的时机，这就是导航守卫。

2、导航守卫分类

导航守卫大致分为三类：全局的，单个路由独享的，或者组件级的。

2.1、全局守卫

2.1.1、全局前置守卫beforeEach

router.beforeEach((to, from, next) => {
})

在路由跳转前触发，参数包括to，from，next（参数会单独介绍）三个，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚。

2.1.2、全局解析守卫beforeResolve(2.5.0 新增)

router.beforeResolve((to, from, next) => {
})

在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

2.1.3、全局后置钩子afterEach

router.afterEach((to, from, failure) => {
})

全局后置钩子不会接受 next 函数也不会改变导航本身

2.2、路由独享的守卫

指在单个路由配置的时候也可以设置的钩子函数

2.2.1、beforeEnter

    beforeEnter: (to, from, next) => {
    }

2.3、组件内的守卫

2.3.1、beforeRouteEnter

  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  }

beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。

注意：beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。

2.3.2、beforeRouteUpdate(2.2 新增)

  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  }

这个守卫主要是路由复用时被调用，即在当前页面跳转当前页面，会走该守卫，而不会从头走路由钩子函数。

2.3.3、beforeRouteLeave

  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

2.4、守卫参数

2.4.1、to: Route

即将要进入的目标 路由对象

2.4.2、from: Route

当前导航正要离开的路由

2.4.3、next: Function

一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

2.4.3.1、next()

进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。

2.4.3.2、next(false)

中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

2.4.3.3、next(‘/’) 或者 next({ path: ‘/’ })

跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

2.4.3.4、next(error)

(2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

2.4.3.5、注意

确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。

3、完整的导航解析流程

3.1、导航被触发。

3.2、在失活的组件里调用 beforeRouteLeave 守卫。

3.3、调用全局的 beforeEach 守卫。

3.4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

3.5、在路由配置里调用 beforeEnter。

3.6、解析异步路由组件。

3.7、在被激活的组件里调用 beforeRouteEnter。

3.8、调用全局的 beforeResolve 守卫 (2.5+)。

3.9、导航被确认。

3.10、调用全局的 afterEach 钩子。

3.11、触发 DOM 更新。

3.12、调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

4、示例

PageOne.vue

<template>
  <div>
    <h1>这是PageOne页面</h1>
    <button @click="jump">跳转到当前页面</button>
  </div>
</template>

<script>
export default {
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log('PageOne组件内的守卫', 'beforeRouteEnter')
    next()
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log('PageOne组件内的守卫', 'beforeRouteUpdate')
    console.log(this.$route.query)
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log('PageOne组件内的守卫', 'beforeRouteLeave')
    next()
  },
  // 生命周期
  beforeCreate () {
    console.log('beforeCreate')
  },
  created () {
    console.log('created')
  },
  beforeMount () {
    console.log('beforeMount')
  },
  mounted () {
    console.log('mounted')
  },
  beforeDestroy () {
    console.log('beforeDestroy')
  },
  destroyed () {
    console.log('destroyed')
  },
  methods: {
    jump () {
      this.$router.push({
        path: '/pageone',
        query: {
          name: 'pageone'
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/pageone',
    name: 'PageOne',
    component: () => import(/**/ '../views/PageOne.vue'),
    beforeEnter: (to, from, next) => {
      console.log('PageOne路由独享的守卫', 'beforeEnter')
      next()
    }
  },
  {
    path: '/pagetwo',
    name: 'PageTwo',
    component: () => import(/**/ '../views/PageTwo.vue'),
    beforeEnter: (to, from, next) => {
      console.log('PageTwo路由独享的守卫', 'beforeEnter')
      next()
    }
  },
  {
    path: '/pagethree',
    name: 'PageThree',
    component: () => import(/**/ '../views/PageThree.vue'),
    beforeEnter: (to, from, next) => {
      console.log('PageThree路由独享的守卫', 'beforeEnter')
      next()
    }
  }
]

const router = new VueRouter({
  // 配置单页应用的基本路径
  // base: '/app/',
  // history模式，访问不带#
  mode: 'history',
  routes,
  fallback: 'true'
})

router.beforeEach((to, from, next) => {
  console.log('全局前置守卫:beforeEach')
  next()
})
router.beforeResolve((to, from, next) => {
  console.log('全局解析守卫:beforeResolve')
  next()
})
router.afterEach((to, from, failure) => {
  console.log('全局后置钩子:afterEach')
})
export default router

PageOne和PageTwo、PageThree代码几乎一致，所以这里就不在给出PageTwo和PageThree示例代码了。

第一次进入PageOne需要走

其他页面需要先走：beforeRouteLeave
PageOne需要走：beforeEach -> beforeEnter -> beforeRouteEnter -> beforeResolve -> afterEach ->vue生命周期

从PageOne进入PageOne需要走

beforeEach -> beforeRouteUpdate -> beforeResolve -> afterEach

5、流程图

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！