vue路由守卫? 讲解⻚⾯权限

所谓的路由守卫就是当我们进⾏⻚⾯跳转的时候会触发的钩⼦函数, 我们把它称之为vue路由守卫. vue⼀共给我们提供了三种路由守卫,第⼀种全局路由守卫,第⼆种是组件内路由守卫,第三种路由 独享守卫,这个是写在路由⾥⾯. 不管是全局,还是组件以及独享,都会有beforeEach、beforeResolve 、a"erEach 分别表示的意 思路由跳转前会触发的钩⼦函数以及进⼊路由的时候,以及进⼊路由之后会触发的钩⼦函数. 这⼏个钩⼦函数⾥⾯都有⼀个回 调函数,这个回调函数⾥⾯会有三个参数,分别是to,from,next,分别对应的是要进⼊的路由、离开之前的路由,以及进⼊写⼀个路 由

在项⽬中我们经常使⽤路由守卫实现⻚⾯的鉴权. ⽐如:当⽤户登录之后,我们会把后台返回的token以及⽤户信息保存到vuex 和本地,当⻚⾯进⾏跳转的时候,我们会在路由守卫⾥⾯获取vuex⾥⾯的token,如果token存在的话,我们则使⽤next让他进⼊要 跳转的⻚⾯,如果token不存在的话我们使⽤next⽅法让他回到登录⻚

导航守卫一共有三种

全局的守卫 守卫所有的页面

beforeEach 路由前置守卫

beforeResolve 路由解析之前

afterEach 路由离开

全局守卫 beforeEach 和 beforeResolve  

他们两个都会在路由跳转前就执行 参数都是 to from next

他们两个的区别 执行的时机不一样 beforeEach 是在路由规则被循环之前执行

beforResolve 是在组件被解析之后调用 beforeEach 要比 beforResolve 先执行

组件守卫 守卫单个组件

beforeRouteEnter 路由进入

beforeRouteUpdate 路由更新

beforeRouteLeave 路由离开

独享守卫 守卫单个页面

beforeEnter 路由进入之前

## 三种守卫全局 组件 独享守卫的区别：

1. 作用范围不同 全局作用于所有页面 组件作用于单个组件 独享也是守卫单个页面

2. 代码写的位置不一样 全局守卫写在 router/index.js 中 组件守卫写在组件里 跟 data 同级 独享守卫写在路由规则里

3. 执行顺序有区别 执行的顺序要记下来

   beforeEach 前置守卫

   beforeEnter 独享守卫

   beforeRouteEnter 组件守卫

   beforeResolve 解析守卫

   afterEach 路由后置守卫