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

news2024/12/23 22:20:44

什么是重定向

路由的重定向 :将匹配到的路由 【替换】 为另一个路由。
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.coloradmin.cn/o/1350734.html

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

相关文章

HackTheBox - Medium - Linux - Investigation

Investigation Investigation 是一款 Linux 机器,难度为中等,它具有一个 Web 应用程序,可为图像文件的数字取证分析提供服务。服务器利用 ExifTool 实用程序来分析图像,但是,正在使用的版本存在命令注入漏洞&#xff…

带大家做一个,易上手的家常糖醋白菜

准备 如果是大白菜就一个 小白菜就要两个 因为白菜炒完之后会变少 将白菜叶剥开每叶分成三个小块 整个剥完之后 放入盆中清洗干净 调一个糖醋汁 一勺料酒 两勺生抽 三勺白砂糖 四勺香醋 起锅烧油 放两个干辣椒 辣椒炒一下 然后倒入白菜 翻炒直到油全部融入白菜 然后倒入…

python打开文件的方式比较

open(addr,w) 打开之后文件无论以前有什么,打开后都要清空 /// open(addr,r) 文件打开后,不删除以前内容

fineBI web组件传参

1、fineBI web组件传参 1.1、 Web组件- FineBI帮助文档 FineBI帮助文档1. 概述1.1 版本FineBI 版本HTML5移动端展现功能变动6.0--V11.0.83web组件适配移动端效果优化6.0.13-web组件支持传递参数 ${过滤组件https://help.fanruan.com/finebi/doc-view-143.html 1.2、自己做的例…

51单片机之LED灯

51单片机之LED灯 🌴前言:🏮点亮LED灯的原理💘点亮你的第一个LED灯💘点亮你的八个LED灯 📌让LED灯闪烁的原理🎽 LED灯的闪烁🏓错误示范1🏓正确的LED闪烁代码应该是这样&am…

太阳系三体模拟器

介绍 《三体》是刘慈欣创作的长篇科幻小说,文中提到的三体问题比较复杂和无解。 该项目代码就是利用 Python 来模拟三体的运行,此项目代码完全共享,欢迎下载。 我们可以自己通过调整天体的初始坐标、质量和矢量速度等等参数来自定义各种场景…

2024年01月数据库流行度最新排名

点击查看最新数据库流行度最新排名(每月更新) 2024年01月数据库流行度最新排名 TOP DB顶级数据库索引是通过分析在谷歌上搜索数据库名称的频率来创建的 一个数据库被搜索的次数越多,这个数据库就被认为越受欢迎。这是一个领先指标。原始数…

【算法每日一练]-数论 (保姆级教程 篇2 )#行列式 #甜甜花研究 #约数个数 #模数 #数树 #盒子与球

目录 今日知识点: 辗转相减法化下三角求行列式 组合数动态规划打表 约数个数等于质因数的次方1的乘积 求一个模数 将n个不同的球放入r个不同的盒子:f[i][j]f[i-1][j-1]f[i-1][j]*j 行列式 甜甜花的研究 约数个数 模数 数树 盒子与球 行列…

【刷题日志】深度理解除(/)与取模(%)附水仙花数以及变种水仙花数题解

文章目录 🚀前言🚀除与取模🚀水仙花数🚀变种水仙花数 🚀前言 本专栏文章都直奔刷题主题,阿辉都不会在废话了,加油,少年!!! 🚀除与取…

《MySQL系列-InnoDB引擎03》MySQL文件相关介绍

文章目录 第三章 文件1 参数文件1.1 什么是参数?1.2 参数类型 2 日志文件2.1 错误日志2.2 慢查询日志2.2x 慢查询日志拓展-如何开启MySQL慢查询日志?2.2XX 慢查询日志拓展-mysqldumpslow日志分析工具2.3 查询日志2.4 二进制日志 3 套接字文件4 PID文件5 …

使用ros2 launch启动gazebo时,可以设置的sdf文件名称

事实证明:这个文件夹里面的名称都可以设置/usr/share/gz/gz-sim8/worlds 并且不用指定文件夹路径,可以直接输入文件名。当然也可以完全指定路径:

梳理Langchain-Chatchat-UI接口文档

在 Langchain-Chatchat v0.1.17 版本及以前是有前后端分离的 Vue 项目的,但是 v0.2.0 后就没有了。所以本文使用的是 Langchain-Chatchat v0.1.17 版本中的 Vue 项目。经过一番折腾终于将 Langchain-Chatchat v0.1.17 版本前端 Vue 接口和 Langchain-Chatchat v0.2.…

使用MQTT.JS创建一个网页版的MQTT客户端

一、MQTT.JS介绍 MQTT.js 是一个开源的 MQTT 协议的客户端库,使用 JavaScript 编写,主要用于 Node.js 和 浏览器环境中。是JavaScript 环境下的 MQTT 客户端库。可以用于微信小程序、支付宝小程序等定制浏览器环境。 我们可以直接在HTML文件中进行调用…

计算字符串的长度几种方法 | 递归 | 指针减指针 | 计数器 | C语言 | 详解 | 期末考试必看!!!

一,使用 递归 计算 字符串 的 长度 1,题目描述 2,分析题目 Ⅰ,题目中要求除了函数的形参,函数中不能够使用多余的变量(这是比较苛刻的要求)。 Ⅱ,根据此,很自然的…

C++正则表达式全攻略:从基础到高级应用

C正则表达式全攻略:从基础到高级应用 一、基础知识二、正则表达式的基本匹配三、C中使用正则表达式四、高级正则表达式五、实践示例六、性能优化6.1、编译正则表达式6.2、避免过度使用回溯6.3、优化匹配算法 七、总结 一、基础知识 正则表达式是一种用于匹配、搜索…

C#【必备技能篇】cmd重定向

文章目录 一、实现目的二、工程1:Test.cs代码三、工程2:MainConsoleApp.cs代码四、测试结果 一、实现目的 通过MainConsoleApp.exe向Test.exe中输入参数,并将结果返回到MainConsoleApp.exe 二、工程1:Test.cs代码 using System…

机器学习-生存分析:如何基于随机生存森林训练乳腺癌风险评估模型?

一、 引言 乳腺癌是女性最常见的恶性肿瘤之一,也是全球范围内女性死亡率最高的癌症之一。据统计,每年全球有超过200万人被诊断为乳腺癌,其中约60万人死于该疾病。因此,乳腺癌的早期诊断和风险评估对于预防和治疗乳腺癌具有非常重要…

计算机毕业论文内容参考|基于Java的超市管理系统的设计与实现

文章目录 摘要:前言绪论1课题背景2国内外现状与趋势3课题内容相关技术与方法介绍系统分析系统设计系统实现系统测试总结与展望后续工作展望摘要: 本文详细介绍了基于Java的超市管理系统的设计与实现。该系统采用Java语言和常用的开发框架,实现了超市的进货、销售、库存等日…

[Flutter]WindowsOS中相关配置

Flutter项目在Windows平台上如何配置 目录 Flutter项目在Windows平台上如何配置 写在开头 正文 1、OS准备 2、编译环境准备 ① 下载AndroidStudio ② 下载dart ③ 下载flutter ④ 下载并安装VS ⑤ 在AS中配置dart和flutter 3、配置中遇到的问题 写在结尾 写在开头…

2024年编程学习规划:掌握编程技能的最佳路线

如果大家感感兴趣也可以去看: 🎉博客主页:阿猫的故乡 🎉系列专栏:JavaScript专题栏 🎉ajax专栏:ajax知识点 🎉欢迎关注:👍点赞🙌收藏✍️留言 文章…