![2ff7bae76550283aa1ad56efda16ba2b.png](https://img-blog.csdnimg.cn/img_convert/2ff7bae76550283aa1ad56efda16ba2b.png)
1.导航守卫是什么
官方这样说
导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。导航守卫 | Vue Routerrouter.vuejs.org
简单的说,导航守卫就是路由跳转过程中的一些钩子函数。路由跳转是一个大的过程,这个大的过程分为跳转前中后等等细小的过程,在每一个过程中都有一函数,这个函数能让你操作一些其他的事儿的时机,这就是导航守卫。
2.导航守卫全解析
先看一个钩子函数执行后输出的顺序截图吧
![6ba383541e4d7a43eace0396abb63c59.png](https://img-blog.csdnimg.cn/img_convert/6ba383541e4d7a43eace0396abb63c59.png)
导航守卫分为:全局的、单个路由独享的、组件内的三种。分别来看一下:
【全局的】:是指路由实例上直接操作的钩子函数,特点是所有路由配置的组件都会触发,直白点就是触发路由就会触发这些钩子函数,如下的写法。钩子函数按执行顺序包括beforeEach、beforeResolve、afterEach三个。