vue的路由及路由的导航守卫

vue 路由有⼏种模式?有什么区别?原理是什么?讲解

vue 的路由模式⼀共有两种,分别是哈希和 history. 他们的区别是 hash 模式不 会包含在 http 请求当中,并且 hash 不会重新加载⻚⾯,⽽使⽤ history 模式的话,如果前端的 url 和后端发起请求的 url 不⼀致的话,会 报 404 错误,所以使⽤ history 模块的话我们需要和后端进⾏配合.

history 的原理就是利⽤ html5 新增的两个特性⽅法,分别是 pushState 和 replaceState 来完成的. 以上就是我对 vue 路由模式的理解.

路由导航守卫

.1 什么是导航守卫

路由的导航守卫 又叫做路由的钩子函数 或者路由的生命周期函数 是在页面跳转的过程中到了某一个特定的时间节点会触发的钩子函数 有三种七个

全局守卫

beforeEach 全局前置守卫

beforeResolve 路由解析之前

afterEach 全局后置守卫(有两个参数 to ,from)

组件级守卫

beforeRouteEnter 路由进入之前

beforeRouteUpdate 路由更新之前

beforeRouteLeave 路由离开之前

单个路由独享的守卫 beforeEnter 路由进入之前

这些导航守卫有三个参数 to from next to 代表到哪儿去 from 代表从哪儿来 next 代表执行下一步

.2 导航守卫的使用场景

在写代码的过程中一般用导航守卫进行页面的鉴权处理，在用户登陆成功的时候，我们会把 token 和用户信息存到 vuex 或者本地存储中，代表了用户的登陆状态，在访问某个页面的时候判断是否存的有 token，就能正常访问这个页面，如果没有 token，那么就用 next 跳转到登陆页面

.3 导航守卫的执行顺序

全局前置

单个路由规则的

组件前置守卫

全局解析守卫

后置守卫

.4 beforeEach 和 beforeResolve 的区别

这两个都是全局守卫 都是在路由跳转之前就会执行的守卫 beforeEach 比 beforeResolve 执行的时间要更早