vue2、vue3中路由守卫变化

什么是路由守卫?

路由守卫就是路由跳转的一些验证,比如登录鉴权(没有登录不能进入个人中心页)等等等
路由守卫分为三大类:

  1. 全局守卫:前置守卫:beforeEach 后置钩子:afterEach

  2. 单个路由守卫:独享守卫:beforeEnter

  3. 组件内部守卫:beforeRouteEnter beforeRouteUpdate beforeRouteLeave
    所有的路由守卫都是三个参数:

    to: 要进入的目标路由(去哪儿)

    from: 要离开的路由(从哪来)

    next: 是否进行下一步(要不要继续

写next()相当于 next(true) 继续执行

不写 相当于next(false)终止执行

next(path)跳转 例如:next("/login")

注意:后置钩子afterEach没有next参数,我们来详细看看都是怎么使用的叭

全局守卫:

全局前置守卫beforEach:

给需要守卫的路由加上: meta: { permission: true },

router.beforeEach((to, from, next) => {if (to.meta.permission) {if (sessionStorage.getItem("token")) {next();} else {alert("请先登录");next("/login");}} else {next();}
});

全局后置钩子afterEach(少用)

router.afterEach((to, from) => {// to and from are both route objects.
});

单个路由守卫:

  // 首页模块路由{path: "/index",name: "index",meta: { permission: true },component: () => import("../views/Index.vue"),beforeEnter: function(to, from, next) {if (sessionStorage.getItem("token")) {next();} else {alert("请先登录");next("/login");}}},

组件内部守卫:

datacreatedmountedmethods处于平等关系

beforeRouteEnter举例说明:

  beforeRouteEnter(to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不!能!获取组件实例 `this`// 因为当守卫执行前,组件实例还没被创建if (sessionStorage.getItem("token")) {next();} else {alert("请先登录");next("/login");}},beforeRouteUpdate(to, from, next) {// 在当前路由改变,但是该组件被复用时调用// 可以访问组件实例 `this`},beforeRouteLeave(to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`},

beforeRouteEnter 是进入前

beforeRouteUpdate 是路由变化时

beforeRouteLeave 是离开后。这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

注意:
beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

vue2、vue3中路由守卫变化

router.beforeEach((to,from)=>{// 现在next可选// vue2 :// 写next()相当于 next(true) 继续执行// 不写 相当于next(false)终止执行// next(path) 跳转指定路由(重定向) //--------------------------------// vue3 :// 返回true | undefined 放行// 返回false取消// 返回路由地址(对象格式) 重定向})

例子:

// 访问权限控制
router.beforeEach((to) => {// 用户仓库const store = useUserStore()// 不需要登录的页面,白名单const wihteList = ['/login']// 如果没有登录(pinia中没有token)且不在白名单内,去登录if (!store.user?.token && !wihteList.includes(to.path)) return '/login'// 否则不做任何处理,什么都不返回则默认返回undefined
})

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

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

相关文章

Vue快速入门

一、概述 1.是一套前端框架,可免除原生JavaScript中的DOM操作,基于MVVM思想,实现数据双向绑定。 实现由MVC——>MVVM的转换 二、入门 1.新建HTML页面,引入Vue.js文件 2.在JS代码区,创建Vue核心对象,进行…

嵌入式软件工程师面试题——2025校招专题(三)

说明: 面试题来源于网络书籍,公司题目以及博主原创或修改(题目大部分来源于各种公司);文中很多题目,或许大家直接编译器写完,1分钟就出结果了。但在这里博主希望每一个题目,大家都要…

生产环境元空间内存溢出(OOM)的问题排查

一、现象 2023.10.17下午收到业务反馈,说是接口调用超时,进件系统和核心系统调用外数系统接口时等待过久,引起系统异常。然后我们看了下接口调用的日志,确实接口的响应时间在五十秒左右。我们自己测试了下,发现也是这…

leetcode 503. 下一个更大元素 II、42. 接雨水

下一个更大元素 II 给定一个循环数组 nums ( nums[nums.length - 1] 的下一个元素是 nums[0] ),返回 nums 中每个元素的 下一个更大元素 。 数字 x 的 下一个更大的元素 是按数组遍历顺序,这个数字之后的第一个比它更大的数&…

【c#】2022创建WEB API接口教程demo

c#创建WEB API接口 创建WEB API接口结果图涉及到的技术设计流程创建WEB API接口 结果图 涉及到的技术 设计流程 1、创建WEB api项目,使用控制器和penapi勾选上,第一次创建项目时没有勾选,因为感觉没啥用。后面跑项目的时候,要把接口用swagger去直接生成的时候,还是需要…

自然语言处理---Transformer机制详解之BERT模型介绍

1 BERT简介 BERT是2018年10月由Google AI研究院提出的一种预训练模型. BERT的全称是Bidirectional Encoder Representation from Transformers.BERT在机器阅读理解顶级水平测试SQuAD1.1中表现出惊人的成绩:全部两个衡量指标上全面超越人类,并且在11种不…

Postman的简单使用

Postman简介 官网 Postman是Google公司开发的一款功能强大的网页调试与发送HTTP请求,并能运行测试用例的Chrome插件 使用Postman进行简单接口测试 新建测试 → 选择请求方式 → 请求URL,下面用百度作为例子: 参考文档 [1] Postman使用教程…

异常的处理和HTTP状态码的分类

在爬虫过程中,可能会遇到各种异常情况,如网络连接错误、网页解析错误、请求超时等。为了提高爬虫的稳定性和容错性,需要对这些异常进行处理。 异常处理是通过捕获和处理异常来解决程序中出现的错误情况。在爬虫中,常见的异常处理…

Java基础-反射

代理相关 为什么需要代理? 代理可以无侵入式的对方法进行增强,而不需要修改原始方法的代码,这样就可以在不修改原始方法的情况下,对方法进行增强。 代理长什么样子? 代理里面就是对象要被代理的方法 Java通过什么方式…

RCE 远程代码执行漏洞分析

RCE 漏洞 1.漏洞描述 Remote Command/Code Execute 远程命令执行/远程代码执行漏洞 这种漏洞通常出现在应用程序或操作系统中,攻击者可以通过利用漏洞注入恶意代码,并在受攻击的系统上执行任意命令。 2.漏洞场景 PHP 代码执行PHP 代码注入OS 命令执…

Kettle循环结果集中的数据并传入SQL组件【或转换】里面

简介:在尝试使用了结果集的Demo循环后,进入到生产还是有一点问题的,以下是各个组件的分解解释、遇到的问题,以及解决问题的思路,最后文章的最后会把完整的Ktr文件放出来。记得收藏点赞喔! 先来看张图~来自…

Web界面自动化操作工具 - Selenium常见用法

Selenium是一个用于自动化浏览器操作的工具,常用于Web应用程序的测试和爬虫开发。 下面是一些Python Selenium的常见用法和代码示例: 1. 导入Selenium库和WebDriver: from selenium import webdriver2. 创建WebDriver实例: # …

OSPF的网络类型

1.3配置OSPF的网络类型 1.3.1实验3&#xff1a;配置P2P网络类型 实验需求 实现单区域OSPF的配置实现通过display命令查看OSPF的网络类型 实验拓扑 实验拓扑如图1-11所示 图1-11 配置P2P网络类型 实验步骤 步骤1&#xff1a;[1] 配置IP地址 路由器R1[2] 的配置 <Huawe…

Redis - Python 客户端基本使用指南

概述 参考&#xff1a;python 模块Redis模块&#xff0c;连接Redis数据库 Python 中的 Redis 客户端库允许开发者与 Redis 数据库进行交互。这些库允许在 Python 中连接到 Redis、执行命令以读取或写入数据&#xff0c;并处理 Redis 数据。 以下是一些常见的 Python Redis 客…

html iframe 框架有哪些优缺点?

目录 前言&#xff1a; 用法&#xff1a; 理解&#xff1a; 优点&#xff1a; 嵌套外部内容&#xff1a; 独立性&#xff1a; 分离安全性&#xff1a; 跨平台兼容性&#xff1a; 方便维护&#xff1a; 缺点&#xff1a; 性能开销&#xff1a; 用户体验问题&#xf…

vue项目中内嵌iframe,打包上线时候iframe地址如何写?

vue项目中内嵌iframe&#xff0c;打包上线时候iframe地址如何写 一、项目结构1.内嵌的iframe文件位置2.打包后的iframe的位置 二、代码 前提描述&#xff0c;项目是用webpack打包的&#xff0c;内嵌一个完整的js小组件 一、项目结构 1.内嵌的iframe文件位置 2.打包后的iframe的…

图论05-【无权无向】-图的广度优先BFS遍历-路径问题/检测环/二分图/最短路径问题

文章目录 1. 代码仓库2. 单源路径2.1 思路2.2 主要代码 3. 所有点对路径3.1 思路3.2 主要代码 4. 联通分量5. 环检测5.1 思路5.2 主要代码 6. 二分图检测6.1 思路6.2 主要代码6.2.1 遍历每个联通分量6.2.2 判断相邻两点的颜色是否一致 7. 最短路径问题7.1 思路7.2 代码 1. 代码…

听GPT 讲Rust源代码--library/std(2)

File: rust/library/std/src/sys_common/wtf8.rs 在Rust源代码中&#xff0c;rust/library/std/src/sys_common/wtf8.rs这个文件的作用是实现了UTF-8编码和宽字符编码之间的转换&#xff0c;以及提供了一些处理和操作UTF-8编码的工具函数。 下面对这几个结构体进行一一介绍&…

wkhtmltoimage/wkhtmltopdf 使用实践

1. 介绍 wkhtmltopdf/wkhtmltoimage 用于将简单的html页面转换为pdf或图片&#xff1b; 2.安装 downloads 2.1. mac os 下载64-bit 版本然后按照指示安装, 遇到 untrust developers 时&#xff0c;需要在 Settings -> Privacy 处信任下该安装包。 2.2. debian # 可用…

【完美世界】被骂国漫之耻,石昊人设战力全崩,现在真成恋爱世界了

【侵权联系删除】【文/郑尔巴金】 深度爆料&#xff0c;《完美世界》动漫第135集预告片已经更新了&#xff0c;但是网友们对此却是一脸槽点。从预告中可以看出&#xff0c;石昊在和战王战天歌的大战中被打成重伤&#xff0c;最后云曦也被战天歌抓住。在云曦面临生死危机的时候…