导航守卫+vuex学习

简介: 直白的说,导航守卫就是路由跳转过程中的一些钩子函数,这些函数能让你在跳转过程中操作一些其他的事儿的时机,这就是导航守卫。比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录。此时可以使用路由导航来实现。导航守卫有三种:全局的, 单个路由独享的, 组件级的。

单个路由的

写在路由配置中

beforeEnter 有三个参数,to,from,next

2.png

全局的


在router/index.js中


beforeEach 使用 router.beforeEach 注册一个全局前置守卫,有三个参数,to,from,next


beforeResolve 用 router.beforeResolve 注册一个全局解析守卫,在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用


afterEach 全局后置钩子,它没有next 参数,也不会改变导航本身,因为此时导航已经完成。

b5c0fe0377a.png


相关文章
|
7月前
|
数据安全/隐私保护
导航守卫有哪三种?
导航守卫有哪三种?
65 0
|
2月前
|
JavaScript UED 开发者
Vue中的导航守卫有哪三种?分别有什么作用
Vue中的导航守卫有哪三种?分别有什么作用
|
3月前
vue3+uniapp配置路由导航守卫
vue3+uniapp配置路由导航守卫
|
5月前
|
JavaScript
Vue Router 路由守卫/导航守卫
Vue Router 路由守卫/导航守卫
43 0
导航守卫的使用
导航守卫的使用
49 0
|
7月前
|
JavaScript 前端开发
vue3中导航守卫
vue3中导航守卫
83 0
|
7月前
|
JavaScript
详解Vue3——设置导航守卫
详解Vue3——设置导航守卫
133 0
|
存储 JavaScript
vuex和导航守卫
vuex和导航守卫
|
7月前
|
JavaScript 数据安全/隐私保护
Vue状态管理:如何在Vue中实现路由导航守卫?
Vue状态管理:如何在Vue中实现路由导航守卫?
58 2
|
7月前
vue3——导航守卫
vue3——导航守卫
81 0