2020-07-20

vue-router的基础和使用，给大家推荐一篇写得很清晰并且通俗易懂的文章：

关于vue-router的基础和使用，大家可以看这一篇文章。
//www.greatytc.com/p/4c5c99abb864

学有余力的小伙伴，可以继续往下看，我们关于vue-router导航守卫的解析：

一、导航守卫是什么

导航守卫就是路由跳转过程中的一些钩子函数。
因为路由跳转过程分为跳转前中后几个阶段，每个阶段都有各自的函数，在这些函数里我们可以执行一些具体操作，这就需要导航守卫。

我们先来看一下官方给出的解析流程：

导航被触发。

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

调用全局的beforeEach守卫。

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

在路由配置里调用 beforeEnter。

解析异步路由组件。

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

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

导航被确认。

调用全局的afterEach钩子。

触发DOM更新。

用创建好的实例调用beforeRouteEnter守卫中传给 next 的回调函数。

不清楚啥意思？没关系，我们来分类了解：

二、导航分类

导航守卫有三种：全局的、单个组件独享的、组件内部的。

1. 全局的：

这一类导航守卫在路由实例上直接操作。按顺序分为：beforeEach、beforeResolve、afterEach。

（1）beforeEach(to, from, next)：跳转前触发，常用于登录验证等需要跳转前告知的情况。

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

（2）beforeResolve(to, from, next)：跳转前触发。

（3）afterEach(to, from)：跳转后触发，在beforeRouteEnter(组件内守卫)之前。

2. 独享的

独享的要在路由中进行单独配置，只有一个beforeEnter，和全局的beforeEach完全相同，如果都设置则在beforeEach之后紧随执行。如图：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

3. 组件内：

类似于组件内的生命周期，如图：

export default{
  data(){
    //...
  },
  beforeRouteEnter (to, from, next) {
  // 在渲染该组件的对应路由被confirm前调用
  // 不能获取组件实例 `this`，因为守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用，可以访问组件实例 `this`
  // 带动态参数的路径 /foo/:id，在/foo/1和/foo/2之间跳转，会渲染同样的组件，这个钩子就会被调用。
  },
  beforeRouteLeave (to, from, next) {
  // 导航离开该组件的对应路由时调用，可以访问组件实例 `this`
  }
}

1.beforeRouteEnter
不能访问组件实例this，因为他在beforeCreate生命周期前触发。如果要访问组件实例，需要传一个回调给 next。导航被确认时执行回调(mounted之后)。可以在这个守卫中请求服务端获取数据及赋值等。

beforeRouteEnter (to, from, next) {
  // 这里还无法访问到组件实例，this === undefined
  next( vm => {
    // 通过 `vm` 访问组件实例
  })
}

2. beforeRouteUpdate
当前路由改变，且该组件被复用时。

3. beforeRouteLeave
导航离开该组件的对应路由时。

※ 总结一下，点击切换路由时的执行顺序：

类别用颜色做了区分哦.png

一张表格就清楚了~OK？

关注公众号【CC前端手记】一起学更多前端小知识吧~