Vue3-32-路由-重定向路由

什么是重定向

路由的重定向 :将匹配到的路由 【替换】 为另一个路由。
redirect : 重定向的关键字。

重定向的特点

1、重定向是路由的直接替换,路由的地址是直接改变的;
2、在没有子路由配置的情况下,重定向的路由可以省略 component 属性的配置,因为根本不会渲染组件;

重定向的几种写法

1.直接使用路径重定向

const routsList = [{path:'/a',name:'aroute',component:componentA},// 当请求路径是 /b2 时,会重定向到 /a{path:'/b2',name:'b2route',redirect:'/a'},
]
重定向前的路由重定向执行后的路由
在这里插入图片描述在这里插入图片描述

2.使用命名路由重定向

此时就需要给 redirect 指定一个 包含 name 属性的对象值,
这个 name 呢 ,就是重定向到的目标路由的 name。

const routsList = [{path:'/a',name:'aroute',component:componentA},// 使用命名路由进行重定向操作 : 给redirect 一个对象值{path:'/b2',name:'b2route',redirect:{name:'aroute'}},
]
重定向之前的路由重定向之后的路由
在这里插入图片描述在这里插入图片描述

3.使用方法的形式返回重定向的目标路由

当 重定向的目标路由需要参数 或着 重定向前需要做一些其他的逻辑时,
可以使用这种方式。
方法的参数 :是重定向前的路由地址
方法的返回值 : 是目标路由对象,可以直接是一个字符串路径,也可以是一个路由对象。

const routsList = [{path:'/a',name:'aroute',component:componentA},{path:'/b3/:abc',redirect: (to:any) =>{console.log('routsList中 重定向的 to 对象 : ',to)// return '/a'; 直接返回一个字符串路径的方式// 返回一个对象的方式return {path:'/a', query:{pa:to.params.abc}}}}
]
重定向前重定向后
在这里插入图片描述在这里插入图片描述

》控制台打印的路由对象

在这里插入图片描述

4.重定向到相对路径

此处对于官网提到的那个案例,并没有实际测试出对应的效果,还有待探究。
》 官网的案例如下:

const routes = [{// 将总是把/users/123/posts重定向到/users/123/profile。path: '/users/:id/posts',redirect: to => {// 该函数接收目标路由作为参数// 相对位置不以`/`开头// 或 { path: 'profile'}return 'profile'},},
]

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

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

相关文章

Langchain访问OpenAI ChatGPT API Account deactivated的另类方法,访问跳板机API

笔者曾经写过 ChatGPT OpenAI API请求限制 尝试解决 Account deactivated. Please contact us through our help center at help.openai.com if you need assistance. 结果如何? 没有啥用。目前发现一条曲线救国的方案。 1. 在官方 openai 库中使用 此处为最新Op…

【IC覆盖率】

覆盖率分享 1 覆盖率提高策略2 覆盖率类型2.1 代码覆盖率2.2 功能覆盖率2.3 Waive提高覆盖率 覆盖率是用于衡量设计的完备性,进行指导分析发现没覆盖到的盲区,通过修改约束或者追加定向case来提到覆盖率; 1 覆盖率提高策略 1.首先最先的是每…

全国计算机等级考试| 二级Python | 真题及解析(10)

一、选择题 1.要实现将实数型变量a的值保留三位小数,以下python可以实现的是( ) A.a%0.001 B.a//0.001 C.round(a,3) D.round(3,a) 2.在Python中要交换变量a和b中的值,应使用的语句组是( )。 A…

基于SpringBoot的医院档案管理系统设计与实现

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的医院档案管理系统设计与…

思科校园网搭建及配置综合小型实验

思科校园网搭建及配置综合小型实验 实验拓扑配置步骤配置聚合链路配置VTP,vlan域模板第一步 配置二层VLAN第二步 配置生成树第三步 配置相关IP地址第四步 配置DHCP及DHCP中继第五步 配置三层的网关冗余协议 双机热备及OSPF第六步 配置静态路由,NAT地址转换及其他配置…

[Verilog语言入门教程] Verilog 减法器 (半减器, 全减器, 加减共用)

依公知及经验整理,原创保护,禁止转载。 专栏 《元带你学Verilog》 <<<< 返回总目录 <<<< “逻辑设计是一门艺术,它需要创造力和想象力。” - 马克张伯伦(Mark Zwolinski) 减法器是数字电路中常见的组件,用于减去两个二进制数的和。 在Verilog中…

总结2023,展望2024

2023年是一个充满挑战和机遇的一年。全球范围内&#xff0c;人们继续努力应对新冠疫情的影响&#xff0c;各行各业都面临着巨大的变革和调整。在这个动荡的环境下&#xff0c;技术行业也经历了许多重要的发展和变革。 首先&#xff0c;人工智能在2023年取得了巨大的突破和应用…

面试经典150题(62-64)

leetcode 150道题 计划花两个月时候刷完&#xff0c;今天&#xff08;第三十天&#xff09;完成了3道(62-64)150&#xff1a; 62.&#xff08;226. 翻转二叉树&#xff09;题目描述&#xff1a; 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其…

麒麟云增加计算节点

一、安装基座系统并配置好各项设置 追加的计算节点服务器&#xff0c;安装好系统&#xff0c;把主机名、网络网线&#xff08;网线要和其他网线插的位置一样&#xff09;、hosts这些配置好&#xff0c;在所有节点的/etc/hosts里面添加信息 在控制节点添加/kylincloud/multinod…

人工智能趋势报告解读:ai野蛮式生长的背后是机遇还是危机?

近期&#xff0c;Enterprise WordPress发布了生成式人工智能在营销中的应用程度的报告&#xff0c;这是一个人工智能迅猛发展的时代&#xff0c;目前人工智能已经广泛运用到内容创作等领域&#xff0c;可以预见的是人工智能及其扩展应用还将延伸到我们工作与生活中的方方面面。…

springboot自动配置原理

第一步启动类注解 第二步可以看到启动类注解组合了自动配置这个注解&#xff08;enableAutoConfiguration&#xff09; 第三步进入这个注解 可以看到里面导入了一个impotSelector这个自动配置的字节码 第四步点进去 可以看到实现了deferredImportSelector这个接口 并且在这个类…

C# 前端GET或POST传递的两种参数body和query的区别

当前端通过通过Get或Post进行HTTP请求时&#xff0c;有两种方式传递参数&#xff1a;通过请求体&#xff08;body&#xff09;和通过查询字符串&#xff08;query&#xff09;。 GET&#xff1a; GET方法用于从服务器获取资源&#xff0c;它只能通过查询字符串&#xff08;qu…

Rockchip平台Android应用预安装功能(基于Android13)

Rockchip平台Android应用预安装功能(基于Android13) 1. 预安装应用类型 Android上的应用预安装功能&#xff0c;主要是指配置产品时&#xff0c;根据厂商要求&#xff0c;将事先准备好的第三方应用预置进Android系统。预安装分为以下几种类型&#xff1a; 安装不可卸载应用安…

postfix配置tls加密

1.编译安装 编译安装openss【卸载原有openssl&#xff0c;然后下载新的安装&#xff0c;因为postfix需要新版本openssl】编译安装postfix,下面这行命令 make -f Makefile.init makefiles CCARGS"-DHAS_MYSQL -I/www/server/mysql/include -DUSE_SASL_AUTH -I/usr/include…

阿赵UE学习笔记——6、免费资源获取

阿赵UE学习笔记目录 大家好&#xff0c;我是阿赵。   接下来准备要往UE引擎里面放美术资源了。美术资源可以自己做&#xff0c;不过也有一些免费的资源可以供我们使用的&#xff0c;这里介绍一些获得免费美术资源的方法。 一、Quixel 1、Quixel网站下载 Quixel资源库&#…

LiveGBS流媒体平台GB/T28181常见问题-如何配置快照目录快照存储默认目录目录如何配置

LiveGBS流媒体平台GB/T28181常见问题-如何配置快照目录快照存储默认目录目录如何配置 1、快照目录2、指定快照目录3、搭建GB28181视频直播平台 1、快照目录 部署LiveGBS后&#xff0c; 再查看通道播放后 或是 获取通道快照后&#xff0c;就会在LiveSMS部署的服务器里面存储对应…

【日积月累】Java中 正则表达式

目录 日积月累】Java中 正则表达式 1.前言2.基本语法3.Pattern和Matcher类4.校验的表达式大全5.参考文章所属专区 日积月累 1.前言 正则表达式是一种用于匹配文本模式的语法,它通常与编程语言一起使用。在Java中,正则表达式用于匹配字符串,可以使用Pattern和Matcher类来实…

LeetCode 每日一题 Day 28293031 ||三则模拟||找循环节(hard)

1185. 一周中的第几天 给你一个日期&#xff0c;请你设计一个算法来判断它是对应一周中的哪一天。 输入为三个整数&#xff1a;day、month 和 year&#xff0c;分别表示日、月、年。 您返回的结果必须是这几个值中的一个 {“Sunday”, “Monday”, “Tuesday”, “Wednesday…

修复键盘问题的十种方法,总有一种可以帮到你

坏了的键盘可不是闹着玩的。这就是为什么苹果公司向人们支付395美元,以解决其蝴蝶键盘故障的集体诉讼。但这个问题并不总是那么普遍,所以这通常意味着如果出现问题,你只能靠自己了。 重新启动电脑 你有没有试过反复打开电脑?在你尝试任何随机修复之前,一个简单的重新启动…

RK3568驱动指南|第九篇 设备模型-第99章 注册一个自己的总线实验

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…