[Vue3] vue-router路由守卫进阶

路由守卫,可以想象为古代御前侍卫,路由守卫,则是对路由进行权限控制

分类:全局守卫、独享守卫、组件内守卫

文章目录

      • 1.全局前置-路由守卫
      • 2.全局后置守卫
      • 3.独享守卫
      • 4.组件内路由守卫
      • 5.keep-alive遇见vue-router
      • 6.路由器的两种工作模式,history模式与hash模式

1.全局前置-路由守卫

作用:主要用来鉴权
用户点击导航区,随后引起路径的改变,前端路由器监测到,进行规则的匹配,在合适的位置呈现组件。

调用时机:初始化时被调用,每次路由切换之前调用

写法:

router.beforeEach((to, from, next) => {// 判断当前路由是否需要进行权限控制if (to.meta.isAuth) {// 权限控制规则if (localStorage.getItem('token')) {next() // 放行}} else if (to.path == '/home') {next()} else {console.log('暂无权限')}
})

to:即将要进入的目标路由对象
from:当前导航即将要离开的路由对象
next:调用该方法后,才能进入下一个钩子

2.全局后置守卫

主要作用:变更页签标题
调用时机:初始化被调用,每次路由切换之后调用

router.afterEach((to, from) => {document.title = to.meta.title
})

可以在钩子当中定义一些标题,利用meta来定义

const routes = [{path:'/index',component:Home,meta:{title:"首页"}},{path:"/about",component:About,meta:{title:"关于"}}
]
// 利用导航守卫。修改我们的标题
router.afterEach((to, from) => {document.title = to.meta.title
})

3.独享守卫

对某一个路由单独进行控制的守卫


const routes = [{path: "/system",name: "System",component: () => import(/* webpackChunkName: "system" */ "@/views/System"),beforeEnter: (to, from, next) => {if(to.meta.isAuth) {if(localStorage.getItem("token")){next()}} else {console.log("暂无权限");}}},
]

4.组件内路由守卫

beforeRouteEnter、beforeRouteLeave

调用时机:通过路由规则,beforeRouteEnter进入该组件时被调用,beforeRouteLeave离开该组件时被调用

// 进入守卫,通过路由规则,进入该组件时被调用
beforeRouteEnter(to, from,next){},
// 进入守卫,通过路由规则,离开该组件时被调用
beforeRouteLeave(to,from,next){}

5.keep-alive遇见vue-router

keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态或避免重新渲染

  • include:字符串或正则表达,只有匹配的组件会被缓存
  • exclude:字符串或正则表达式,匹配的组件都不会被缓存

router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配的视图组件都会被缓存

<keep-alive><router-view>// 所有路径匹配到的视图组件会被缓存</router-view>
</keep-alive>

6.路由器的两种工作模式,history模式与hash模式

hash模式:

  1. 地址永远带着#号,不美观

  2. 如果以后将地址通过第三方手机app分享,app校验严格,则地址会被标记为不合法

  3. 兼容性好。

history模式:

  1. 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

  2. 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id

  3. 不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404。

  4. 地址干净,美观

  5. 兼容性和hash模式相比略差,IE9不兼容(可使用强制刷新处理)

  6. 应用部署上线时,需要后端人员支持,解决刷新页面服务端404问题。

const router = new VueRouter({routes,mode:'history'
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/155693.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

详解Python安装requests库的实例代码

文章目录 前言基本用法基本的get请求带参数的GET请求解析json关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③Python小游戏源码五、面试资料六、Python兼职渠道 前…

类加载器与反射

1&#xff1a;Java类加载机制 简介&#xff1a; 虚拟机把数据从Class文件加载到内存&#xff0c;并对数据进行校验&#xff0c;解析和初始化&#xff0c;最终形成可以被虚拟机直接使用的java类型。 2&#xff1a;JVM加载Class文件的原理机制 Java中的所有类&#xff0c;都需…

“茶叶创新:爆改营销策略,三个月狂销2300万“

我的朋友去年制作了一款白茶&#xff0c;并在短短三个月内将其销售量推到了2300万的高峰。你相信吗&#xff1f; 这位朋友并没有任何茶叶方面的经验&#xff0c;他只是一个有着冒险精神的企业家。他先找到了一家代工厂&#xff0c;帮助他把他的茶叶理念转化为现实。 当他把茶叶…

win11,安装python,pip,和opencv

1,安装python 在应用商店&#xff0c;输入python&#xff0c;下载安装 2&#xff0c;安装pip 在cmd中&#xff0c;输入pip install SomePackage&#xff0c;安装某一个版本的pip 3,安装opencv 在cmd中&#xff0c;输入 pip3 install opencv-contrib-python -i https://pyp…

【Python】153是一个非常特殊的数,它等于它的每位数字的立方和,即153=1*1*1+5*5*5+3*3*3。编程求所有满足这种条件的三位十进制数。

问题描述 153是一个非常特殊的数&#xff0c;它等于它的每位数字的立方和&#xff0c;即1531*1*15*5*53*3*3。编程求所有满足这种条件的三位十进制数。 输出格式 按从小到大的顺序输出满足条件的三位十进制数&#xff0c;每个数占一行。 方法一&#xff1a; for i in range(10…

私域运营如何提高收益?

一旦建立了私域之后&#xff0c;企业需要不断地进行数据统计与分析&#xff0c;以寻找提高收益的方法。通过收集和分析用户的信息&#xff0c;了解他们的购物行为、心理需求等&#xff0c;从而制定更符合顾客口味的促销计划和产品服务。只有持续对数据进行监控&#xff0c;才能…

代码随想录 10.13 || 二叉树 LeetCode 235.二叉搜索树的最近公共祖先、701.二叉搜索树中的插入操作、450.删除二叉搜索树中的节点

二叉树的定义&#xff1a; 回顾一下二叉树的定义&#xff0c;加固记忆。 struct TreeNode {int val;TreeNode *left;TreeNode *right;TreeNode() : val(0), left(nullptr), right(nullptre) {}TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}TreeNode(int x, Tre…

crontab配置定时根据名称杀进程

服务器上某个进程杀掉后会重启&#xff0c;怀疑是被当成肉鸡&#xff0c;因此是用linux自带的crontab定时执行脚本杀掉进程 上传脚本文件到服务器 #! /bin/bash # 要杀掉进程的名称 APPLICATION"ntools"if pkill -f "${APPLICATION}"; thenecho "${…

深度学习之基于Pytorch的昆虫分类识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介系统架构技术亮点 二、功能三、系统四. 总结 一项目简介 # 深度学习基于 Pytorch 的昆虫分类识别系统介绍 深度学习在图像分类领域取得了显著的成就&#…

ArcGIS Pro 优化的热点分析【Optimized Hot Spot Analysis】

ArcGIS Pro 优化的热点分析【Optimized Hot Spot Analysis】Optimized Hot Spot Analysis 优化的热点分析https://mp.weixin.qq.com/s/lfoIls8exW5G6PPJ9gtDew em&#xff0c;先给大家推荐一个空间统计分析的学习资源网站 https://spatialstats-analysis-1.hub.arcgis.com/ .…

策略选股辅助工具(八)

8-策略选股辅助工具 文章目录 8-策略选股辅助工具一. 查询某个股票日常分析数据的信息二. 查询可以做T的股票的策略信息三. 查询股票K线类型四. 查询策略因子筛选股票信息五. 查询日K数据 处理成 Pdf图信息六. 根据股票的编码和日期获取那段时间的所有的数据信息 一. 查询某个股…

[oeasy]python001_先跑起来_python_三大系统选择_windows_mac_linux

先跑起来 &#x1f94a; Python 什么是 Python&#xff1f; Python [ˈpaɪθɑ:n]是 一门 适合初学者 的编程语言 类库 众多 几行代码 就能 出 很好效果 应用场景丰富 在 各个应用领域 都有 行内人制作的 python 工具类库 非常专业、 好用 特别是 人工智能领域 pytho…

渲染器——双端Diff算法

简单 Diff 算法利用虚拟节点的 key 属性&#xff0c;尽可能地复用 DOM 元素&#xff0c;并通过移动 DOM 的方式来完成更新&#xff0c;从而减少不断地创建和销毁DOM 元素带来的性能开销。但是&#xff0c;简单 Diff 算法仍然存在很多缺陷&#xff0c;这些缺陷可以通过双端 Diff…

【阿里云】图像识别 摄像模块 语音模块

USB 摄像头模块测试及配置 一、首先将 USB 摄像头插入到 Orange Pi 开发板的 USB 接口中二、然后通过 lsmod 命令可以看到内核自动加载了下面的模块三、通过 v4l2-ctl 命令可以看到 USB 摄像头的设备节点信息为 /dev/video0四、使用 fswebcam 测试 USB 摄像头五、使用 motion …

chrome内置路径合集

设置黑夜模式&#xff1a; 输入网址&#xff1a;chrome://flags/ 搜索dark 改为enable 实验项目路径 chrome://flags/ 可用来启用或者关闭某些 Chrome 的实验功能 chrome://settings 将快速打开 Chrome 浏览器的设置页面&#xff0c;页面的内容分类划分为基础和高级设置选项 …

以太网_底层

【实物图】 【网线接口】 MAC(媒体访问控制器)&#xff1a;控制数据的收发和管理&#xff0c;和用户层打交到&#xff1b;通过MII/RMII、SMI接口和PHY进行通信。 PHY(以太网物理层收发器)&#xff1a;中间体&#xff0c;负责收发信号的转换 常见PHY芯片有&#xff1a;LAN8720…

ES学习看这一篇文章就够了

ES学习看这一篇文章就够了 ES学习看这一篇文章就够了-CSDN博客

PIL如何批量给图片添加文字水印?

PIL如何批量给图片添加文字水印&#xff1f; 1 简单引入2 关于PIL3 本文涉及的PIL的几个类4 实现原理5 实现过程5.1 原始图片5.2 导入相关模块5.3 初始化数据5.4 水印字体设置5.5 打开原始图片并新建存储对象5.6 计算图片和水印的大小5.7 选择性设置水印文字5.8 绘制文字并设置…

基于yolov8的车牌检测训练全流程

YOLOv8 是Ultralytics的YOLO的最新版本。作为一种前沿、最先进(SOTA)的模型&#xff0c;YOLOv8在之前版本的成功基础上引入了新功能和改进&#xff0c;以提高性能、灵活性和效率。YOLOv8支持全范围的视觉AI任务&#xff0c;包括检测, 分割, 姿态估计, 跟踪, 和分类。这种多功能…

Java项目实战《苍穹外卖》 三、登录功能

测测你是什么人格吧&#xff0c;地址&#xff1a; MBTI 16种人格测试官网 系列文章目录 苍穹外卖是黑马程序员2023年的Java实战项目&#xff0c;作为业余练手用&#xff0c;需要源码或者课程的可以找我&#xff0c;无偿分享 Java项目实战《苍穹外卖》 一、项目概述Java项目实战…