vue3种路由守卫详解
vue路由守卫
1 什么是路由守卫
路由守卫就是路由跳转过程中的一些钩子函数 ,在路由跳转的时候,做一些判断或其它的操作。 类似于组件生命周期钩子函数 。
2 分类
1.全局路由守卫
- beforeEach(to, from, next) 全局前置守卫,路由跳转前触发
- beforeResolve(to, from, next) 全局解析守卫 在所有组件内守卫和异步路由组件被解析之后触发
- afterEach(to, from) 全局后置守卫,路由跳转完成后触发
2.路由独享守卫
beforeEnter(to,from,next) 路由对象单个路由配置 ,单个路由进入前触发
3.组件路由守卫
- beforeRouteEnter(to,from,next) 在组件生命周期beforeCreate阶段触发
- beforeRouteUpdadte(to,from,next) 当前路由改变时触发
- beforeRouteLeave(to,from,next) 导航离开该组件的对应路由时触发
4.参数
to: 即将要进入的目标路由对象
from: 即将要离开的路由对象
next(Function):是否可以进入某个具体路由,或者是某个具体路由的路径
3.详解
1.路由前置守卫 beforeEach(to, from, next)
const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {// ...
})
在路由跳转前触发,在实际项目中应用最多,主要是登陆验证和跳转权限判断
2.全局解析守卫 beforeResolve(to, from, next)
router.beforeResolve((to, from, next) => {// ...
})
类似于路由前置守卫 beforeEach(to, from, next),也是路由跳转前触发,但它是同时在所有组件内守卫和异步路由组件被解析之后触发的
调用时机:在 beforeEach(to, from, next)和组件内beforeRouteEnter(to, from, next)之后,afterEach(to, from)之前调用
3.全局后置守卫 afterEach(to, from, next)
router.afterEach((to, from) => {// ...
})
于路由前置守卫 beforeEach(to, from, next)相对,路由跳转后触发,但它是同时在所有组件内守卫和异步路由组件被解析之后触发的
调用时机:在 beforeEach(to, from, next)和组件内beforeResolve (to, from, next)之后, beforeRouteEnter(to, from)之前调用
4. 路由独享守卫 beforeEnter(to, from, next)
const router = new VueRouter({routes: [{path: '/foo',component: Foo,beforeEnter: (to, from, next) => {// ...}}]
})
于路由前置守卫 beforeEach(to, from, next)相同,但在beforeEach(to, from, next)后触发
5. 组件路由守卫 beforeRouteEnter(to, from, next)
const Foo = {template: `...`,beforeRouteEnter(to, from, next) {// 不能获取组件实例 // 因为当守卫执行前,组件实例还没被创建}
因为该守卫在组件创建之前阶段触发,那个时候组件还没有创建成功,所以这个守卫内不能使用this
获取组件实例
调用时机:在全局守卫beforeEach(to, from, next)和独享守卫beforeEnter(to, from, next)之后,全局beforeResolve(to, from, next)和全局afterEach(to, from)之前调用
6. 组件路由守卫 beforeRouteUpdate(to, from, next)
beforeRouteUpdate(to, from, next) {// 在当前路由改变,但是该组件被复用时调用// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 },
调用时机:在当前路由复用时
7. 组件路由守卫 beforeRouteLeave(to, from, next)
beforeRouteLeave(to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例}
}
通常用来禁止用户在还未保存修改前突然离开
调用时机:导航离开该组件的对应路由时调用
4.完整的导航解析流程
1.触发进入其它路由
2.调用要离开路由的组件守卫beforeRouteLeave
3.调用全局的前置守卫beforeEach
4.在重用的组件里调用 beforeRouteUpdate
5.在路由配置里的单条路由调用 beforeEnter
6.解析异步路由组件
7.在将要进入的路由组件中调用beforeRouteEnter
8.调用全局的解析守卫beforeResolve
9.导航被确认
10.调用全局的后置钩子afterEach
11.触发 DOM 更新mounted
12.执行beforeRouteEnter守卫中传给 next的回调函数
参考链接
5.实际应用
router.beforeEach((to, from, next) => {NProgress.start(); // NProgress实现显示加载进度条效果console.log("routemgr to", to.path);if ("这里判断是不是开发环境") {//开发环境下,直接路由next();} else {if (to.path == "/login") {//登录页面session.set("isOpen", "ok");next();} else if ("这里判断如不是生产环境下录页面需要判断权限") {//非生产环境下next();} else {//非登录页面需要判断权限console.log("routemgr user", lu.userinfo);if (gadget.isEmptyObject(lu.userinfo)) {//首次打开页面的时候,不需要弹出错误页面提示,直接跳转至登录页面即可let ret = session.get("isOpen");if (ret == "ok") {//vuex用户信息判断,如果不存在,则重新登录MessageBox.alert("用户未登录,需要重新登录.", "错误", {confirmButtonText: "确定",type: "error",}).then(() => {console.log("重新登录");//next(`/procmgr/login?redirect=${to.path}`);next(`/login`);NProgress.done();});} else {next(`/login`);NProgress.done();}} else {//权限判断}}}
});
Vue Router官方文档
vue3种路由守卫详解相关推荐
- Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)详解
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫 官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
- ant design pro vue 动态路由 流程详解
ant design pro vue 动态路由 流程详解 前言 流程图 流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
- 【Tools】VMware虚拟机三种网络模式详解和操作
00. 目录 文章目录 00. 目录 01. VMware虚拟机三种网络模式 02. Bridged(桥接模式) 03. NAT(地址转换模式) 04. Host-Only(仅主机模式) 05. 参考 ...
- mvc ajax提交html标签,Mvc提交表单的四种方法全程详解
Mvc提交表单的四种方法全程详解 2019-01-05 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了Mvc提交表单的四种方法全程详解,编程之家小编觉得挺不错的 ...
- python Django Rest_Framework框架 视图集与路由Routers详解(图文并茂版)
视图集与路由Routers详解 视图集 ViewSet视图集 代码实现 GenericViewSet视图集 代码实现 ModelViewSet视图集 ReadOnlyModelViewSet视图集 路 ...
- vue3过渡和动画详解
vue3过渡和动画详解 一.认识动画 二.Vue的transition动画 三.Transition组件的原理 四.class添加的时机和命名规则 五.过渡css动画 六.同时设置过渡和动画 七.过渡 ...
- VMware虚拟机三种网络模式详解与配置 [转]
VMware虚拟机三种网络模式详解与配置 [转] 原文链接:https://note.youdao.com/ynoteshare1/index.html?id=236896997b6ffbaa8e0d ...
- Beini 的6种攻击模式详解
Beini 的6种攻击模式详解 Aireplay-ng 的 6 种攻击模式详解 -0 Deautenticate 冲突模式 使已经连接的合法客户端强制断开与路由端的连接,使其重新连接.在重 ...
- VM虚拟机三种网络模式详解
感谢wuwenweijuan的优质文章,本文在该文基础上做了注和补充 目录 1 VM虚拟机三种网络模式详解 1.1 Bridged(桥接模式) 1.2 NAT(地址转换模式) 1.3 Host-Onl ...
最新文章
- QTP的那些事---页面弹出框的处理,页面等待加载的处理
- 独家 | 用Python Featuretools库实现自动化特征工程(附链接)
- java数据结构教程_Java数据结构
- maven的pom报plugins错误的解决方法.
- 推荐3个C++系统项目!初级开发者必学!
- Blackboard Collabrate 模拟器打开
- 【CodeForces - 260B 】Ancient Prophesy (暴力匹配,BF算法,日期字符串)
- 新在互站上的校园跑腿/校园任务平台源码
- dj鲜生-27-登陆装饰器-使用django内置的登陆装饰器
- assert.h库学习
- 【关键字】volatile
- 京瓷m1025维修模式进不去_多个品牌复印机进入维修模式步骤大全
- cad插入块_5大模块,彻底学会CAD块!
- 【观察】PowerMax:高端存储,中国制造
- 在程序员职业中,外包的薪资真的更高吗?
- python股票量化交易(13)---使用pyqt5构建股票交易K线形态
- 全网最全java Springboot对接微信公众号开发平台(可能是最全)!
- Flutter支付宝支付
- 360安装 css3插件,Omi官方插件系列 。。支持CSS3 Transform设置
- 经济危机下的国际名牌
热门文章
- 你的网卡真有千兆么?——千兆网卡传输速度解析
- oracle 12.2 迅雷下载,oracle下载-oracle数据库v12.2 最新版下载-6188手游网
- idea重装以后打不开,双击没有反应
- idea创建maven web项目,pom.xml文件一直显示红色
- 常用的计算机有哪些台式的还有哪些,现在台式电脑的主流配置有哪些?
- 几何光学学习笔记(29)-6.4 光亮度
- 如何从ip服务器所用系统,如何从0开始打造一个深度学习服务器?
- UIView 子view跟随父view动态变化
- Freeswitch一些高级功能-配置中文语音提示等
- SOCKET_RAW 手动封装TCP协议