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.hqwc.cn/news/316155.html

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

相关文章

WebStorm 创建一个Vue项目(1)

一、下载并安装WebStorm 步骤一 步骤二 选择激活方式 激活码: I2A0QUY8VU-eyJsaWNlbnNlSWQiOiJJMkEwUVVZOFZVIiwibGljZW5zZWVOYW1lIjoiVU5JVkVSU0lEQURFIEVTVEFEVUFMIERFIENBTVBJTkFTIiwiYXNzaWduZWVOYW1lIjoiVGFvYmFv77yaSkVU5YWo5a625qG25rAIOa0uW3peS9nOWup…

mybatis-flex笔记

MyBatis-Flex 的增删改功能 - MyBatis-Flex 官方网站https://mybatis-flex.com/zh/base/add-delete-update.html 代码https://gitee.com/hntianshu/mybatis-flex-test 一 新增数据 不忽略 null 值。 就是允许有null 忽略null 就是不允许有null BaseMapper 的接口提供了 inser…

Redis7.2.3(Windows版本)

1、解压   2、设置密码 (1) 右击编辑redis.conf文件:  (2) 设置密码。  3、测试密码是否添加成功  如上图所示,即为成功。 4、设置…

案例086:基于微信小程序的影院选座系统

文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序…

使用echarts的bmap配置项绘制区域轮廓遮罩

示例图 代码 <template><div id"map" style"width: 100%; height: 100vh"></div> </template><script> import * as echarts from "echarts"; import "echarts/extension/bmap/bmap"; export default…

音视频技术开发周刊 | 326

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 全球最强「开源版Gemini」诞生&#xff01;全能多模态模型Emu2登热榜&#xff0c;多项任务刷新SOTA 最强的全能多模态模型来了&#xff01;就在近日&#xff0c;智源研究院…

html引入react以及hook的使用

html引入react 效果代码注意 效果 分享react demo片段的时候&#xff0c;如果是整个工程项目就有点太麻烦了&#xff0c;打开速度慢&#xff0c;文件多且没必要&#xff0c;这个时候用html就很方便。 在html中能正常使用useState 和 useEffect 等hook。 代码 <!DOCTYPE htm…

k8s的声明式资源管理(yaml文件)

1、声明式管理的特点 &#xff08;1&#xff09;适合对资源的修改操作 &#xff08;2&#xff09;声明式管理依赖于yaml文件&#xff0c;所有的内容都在yaml文件当中 &#xff08;3&#xff09;编辑好的yaml文件&#xff0c;还是要依靠陈述式的命令发布到k8s集群当中 kubect…

2024年最新版 Ubuntu 20+ 上安装 Docker

2024年最新版 Ubuntu 20 上安装 Docker 一、前言 在网上搜了一些安装docker的方法&#xff0c;怎么说感觉良莠不齐&#xff0c;参考GPT整理一下来自GPT4这边的安装docker的解决方法&#xff0c;实测能用》2024.1.2&#xff0c;大概耗时7分钟左右&#xff08;在没报错的情况下…

TinyEngine 服务端正式开源啦!!!

背景介绍 TinyEngine 低代码引擎介绍 随着企业对于低代码开发平台的需求日益增长&#xff0c;急需一个通用的解决方案来满足各种低代码平台的开发需求。正是在这种情况下&#xff0c;低代码引擎应运而生。它是一种通用的开发框架&#xff0c;通过对低代码平台系统常用的功能进…

白话机器学习的数学-3-评估

1、 模型评估 那我们如何测量预测函数 fθ(x)的正确性&#xff0c;也就是精度呢&#xff1f; 观察函数的图形&#xff0c;看它能否很好地拟合训练数据&#xff1a; 这是只有一个变量的简单问题&#xff0c;所以才能在图上展 示出来。 过像多重回归这样的问题&#xff0c;变量增…

专访 | STIF2023第四届国际科创节访第七在线CEO赵嘉程

12月15日&#xff0c;在STIF2023第四届国际科创节暨数服会上&#xff0c;第七在线获得年度数智化创新典范奖&#xff0c;第七在线CEO赵嘉程在颁奖典礼现场接受了媒体专访。 主持人&#xff1a;赵总&#xff0c;您好&#xff0c;欢迎您接受我们的专访&#xff0c;首先我们特别想…