路由守卫文档阅读总结

141 阅读3分钟

路由守卫有哪几个(全局3个+路由1个+组件3个)

全局前置守卫 beforeEach

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

全局后置守卫 afterEach

路由独享守卫 beforeEnter

组件内的守卫 beforeRouteEnter beforeRouteLeave beforeRouteUpdate (2.2 新增,)

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

至于怎么使用接受什么参数这里就不注释了,太多了而且都是查文档的事

官方给出的导航守卫的完整的导航解析流程

image.png

可以看到在 6.解析异步路由组件 之后 与 9.导航被确认 之前调用了 全局解析守卫 beforeResolve

问题:这是所有守卫在vue源码实现中的执行顺序,但在实际情况中并非完全如此

实际情况中有两种情况:是否跳转到重用组件(这里的重用组件概念为动态路由,而不是两个路由组件中引用了相同的第三组件),这样会影响到多个导航守卫的触发。

三个全局的导航守卫是必然触发的,顺序如下:

全局前置守卫:beforeEach

全局前置守卫:beforeResolve

全局前置守卫:afterEach

不同在于:

最先影响到的组件内的三个守卫 beforeRouteLeave beforeRouteUpdate beforeRouteEnter,如果跳转到重用组件就只会更新从而触发 beforeRouteUpdate ,否则会有一个组件卸载触发 beforeRouteLeave 和一个组件的加载触发 beforeRouteEnter。

而动态路由跳转实际上是同一个路由匹配到不同的参数而已,所以如果跳转到非重用组件,是会触发路由独享守卫:beforeEnter,否则是不会触发的

最后就是如果跳转到非重用组件 会触发要加载的组件的 beforeRouteEnter,而他的next的回调函数也会在最后触发,这个回调函数的意义就是为了获取实例vm的(beforeRouteEnter中组件还没实例完,获取不到this)所以这一个触发的时机也会放在最后

还有个规律:导航被触发 -> 离开时的组件内 -> 离开时的路由独享 -> 进入时全局 -> 进入时的路由独享 -> 解析异步路由组件 -> 进入时的组件内 -> 导航被确认 -> 进入后全局 -> 触发 DOM 更新

离开时的组件内:beforeRouteLeave 或者 进入重用组件不触发

离开时的路由独享:没有

进入时全局:beforeEach

进入时的路由独享:beforeEnter 或者 进入重用组件不触发

进入时的组件内:进入非重用组件 beforeRouteEnter 或者 进入重用组件 beforeRouteUpdate

导航被确认:beforeResolve

进入后全局:afterEach

触发 DOM 更新:beforeRouteEnter 或者 进入重用组件不触发

完整情况如下:
如果跳转到重用组件

全局前置守卫:beforeEach

重用组件内的守卫:beforeRouteUpdate

全局前置守卫:beforeResolve

全局前置守卫:afterEach

如果跳转到非重用组件

组件内的守卫:beforeRouteLeave

全局前置守卫:beforeEach

路由独享守卫:beforeEnter

组件内的守卫:beforeRouteEnter

全局前置守卫:beforeResolve

全局前置守卫:afterEach

组件内的守卫:beforeRouteEnter中next的回调函数

demo地址:gitee.com/luoyisen/vu…