1.vue中前置导航守卫的一些用法-新手笔记

一：守卫导航（navigation guard）

1、守卫导航的定义和作用

1.1 守卫导航的定义

守卫导航是在路由之间跳转时做出相应响应的属于路由的方法

1.2 守卫导航的作用

守卫导航有很多，我主要说一下前置导航，用于在路由跳转前回调。

** 注意：1、守卫导航在默认情况下不会被主动调用 **
** 2、路由跳转时发生的参数传递或者查询操作并不会触发守卫导航 **

2、守卫导航的用法

2.1 前置钩子

`router.beforeEach( (to,from,next) => {
  //第一个参数to:表示跳转后的路由
  //第二个参数from:表示跳转前的路由
  //第三个参数next:表示跳转的路径

} )`
**next()为空时，表示默认跳转，但有时候可以带一些参数**
**参数为字符串时表示改变跳转的路径为参数路径，也可以为一个对象，跳转到对象内的属性值的路径**
**如果想要中止跳转，可以用`next(false)`中止跳转**

2.2 说一下导航和守卫的顺序关系

导航在所有守卫执行之前会一直处于等待（pending）状态，直到所有守卫被解析完毕 （这里守卫是异步解析的？其实我没明白异步是啥意思，是指代码会先继续执行，直到守卫解析完毕，导航才会跳转然后执行其中的内容吗？如果这样那类似于导航的路由跳转方法$router.push('/home')这种，就是一个异步操作了）

2.3最后给出官网的一个导航执行顺序图

完整的导航解析流程

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