【vue3|第28期】 Vue3 + Vue Router:探索路由重定向的使用与作用

news2024/11/25 10:55:33

日期:2024年9月8日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉在这里插入代码片有所帮助,帮忙点个赞,也可以关注我,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 0.0006

说在最前面:本文 vue3 的示例代码,在没有另外声名的情况下,均采用 <script setup> 组合式代码风格,风格统一,避免混乱,请各位新老食客放心食用哈 ^ _ ^


文章目录

  • 一、前言
  • 二、什么是路由重定向?
  • 三、路由重定向的常见场景
  • 四、如何在Vue Router中实现路由重定向?
    • 1、静态的重定向方式
    • 2、动态的重定向方式
  • 五、注意事项
  • 六、结语


在这里插入图片描述


一、前言


Web 应用开发中,Vue.js 无疑是一个强大的框架,尤其是结合 Vue Router 使用时,能够轻松管理单页面应用SPA)的路由。今天,我们将深入探讨 Vue3Vue Router 中的一个关键功能——路由重定向

二、什么是路由重定向?


路由重定向,简单来说,就是当用户访问一个特定的路由时,应用自动将其导航到另一个指定的路由。这个过程对于用户是无感的,但背后却隐藏着许多重要的应用逻辑。

三、路由重定向的常见场景


  • 默认页面跳转:例如,当用户访问应用的根路径时,自动跳转到首页。
  • 旧链接迁移:在应用更新后,有些旧的 URL 可能已经不再使用,通过使用路由重定向,可以将这些旧 URL 映射到新的有效 URL 上,从而避免用户遇到404错误。
  • 权限控制:根据用户的权限或登录状态,自动跳转到相应的页面。
  • 网站维护:当你的网站正在进行维护或升级时,可以使用路由重定向将所有用户请求暂时引导到一个维护页面,以提供必要的通知和信息。
  • 简化用户访问流程:可以把复杂难记的路径通过重定向简化为更简洁、更容易被记住的路径。这样用户在访问页面时更加方便快捷,减少了输入错误的可能性。

四、如何在Vue Router中实现路由重定向?


接下来,让我们看看在 Vue Router 中设置路由重定向两种方式:

1、静态的重定向方式

  • 使用路由重定向:{ path: '/', redirect: '/home' }
  • 使用命名路由重定向:{ path: '/', redirect: { name: 'home' } }
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        // NO1:使用路由重定向
        { path: '/', redirect: '/home' },
		// NO2:使用命名路由重定向
        // { path: '/', redirect: { name: 'home' } }, 
        { path: '/home', component: Home },
        { path: '/about', component: About }
    ]
});

export default router;

在上述代码示例中,当用户访问根路径 / 时,就会自动重定向到 /home 路径。

2、动态的重定向方式

除了上面所讲静态的重定向方式,还可以进行动态重定向。例如根据某些条件来决定重定向的目标路径:

{
    path: '/old-page',
    redirect: to => {
        // 根据条件判断重定向路径
        if (isAdmin) {
            return '/new-page-admin';
        } else {
            return '/new-page-user';
        }
    }
}

在这个动态重定向的示例中,根据 isAdmin 的值来决定用户从 /old - page 重定向到 /new-page-admin还是/new-page-user

五、注意事项


在使用路由重定向时,一定要避免出现无限重定向的循环,这可能会导致应用崩溃。确保你的重定向逻辑是清晰且有效的。

六、结语


通过本文,我们了解了 Vue3Vue Router 中的路由重定向功能,包括它的定义、作用以及如何在应用中实现它。正确地使用路由重定向能够帮助你更好地管理应用的页面跳转逻辑,为用户提供更加流畅和直观的浏览体验。


参考文章:

  • 《Vue Router官方文档》

版权声明:本文为博主原创文章,如需转载,请给出:
原文链接:https://blog.csdn.net/qq_35844043/article/details/141994465

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

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

相关文章

第18届世界杰出华人奖得主王傲山:承父业展关怀,体现“圆桌”精神

王傲山博士是“保二代”&#xff0c;由父亲言传身教及自孩提时代刻在骨子里的氛围&#xff0c;让他理所当然地传承父亲保险助人为乐的精神。在保险行业打滚两旬余&#xff0c;他成就多项傲人的成绩、取得个人成就的同时&#xff0c;以更高的指标作为团队精神&#xff0c;秉持追…

苹果手机qq原文件失效怎么恢复?4个方法,让失效变有效!

热门提问&#xff1a;在QQ上的文件忘记下载了&#xff0c;文件已经过期且无法打开&#xff0c;有什么方法可以恢复这些失效的文件呢&#xff1f; 小编这里有4个靠谱的方法&#xff0c;可以解决苹果手机QQ原文件失效怎么恢复的问题。只要大家掌握了这4个方法&#xff0c;让苹果…

【如何在鼠标右键添加Typora软件(使用脚本)】

下载Typora后&#xff0c;希望右键新建文件时候&#xff0c;可以新建md文件。 使用下面的注册脚本就可以实现&#xff1a; Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\.md] "Typora.md" "Content Type""text/markdown" "Per…

C语言---函数指针基础总结万字(4)

一、 函数 1.函数是一段可以重复执行的代码。 它可以接受不同的参数&#xff0c; 完成对应的操作。 下面的例子就是一个函数 int plus(int n) {return n; }上面的代码声明了一个函数plus()。 2.函数声明的语法有以下几点&#xff0c;需要注意。 返回值类型。 函数声明时&a…

Mac电脑IDEA2024安装后打不开问题解决

Mac电脑IDEA2024安装后打不开问题解决 由于电脑系统升级&#xff0c;导致我用的2019版本的IDEA一打开就卡&#xff0c;机缘巧合拥有了一个正版的IDEA账号&#xff0c;下载2024版本的IDEA&#xff0c;打开报错。 由于电脑系统升级&#xff0c;导致我用的2019版本的IDEA一打开就卡…

Day20_0.1基础学习MATLAB学习小技巧总结(20)——MATLAB绘图篇(3)

利用空闲时间把碎片化的MATLAB知识重新系统的学习一遍&#xff0c;为了在这个过程中加深印象&#xff0c;也为了能够有所足迹&#xff0c;我会把自己的学习总结发在专栏中&#xff0c;以便学习交流。 参考书目&#xff1a;《MATLAB基础教程 (第三版) (薛山)》 之前的章节都是…

项目实战系列三: 家居购项目 第五部分

&#x1f333;显示订单[订单管理] &#x1f333;暂时缺货 需求分析 1.如果某家居库存为0, 首页的"Add to Cart" 按钮显示为"暂时缺货" 2.后台也加上校验. 只有在 库存>0 时, 才能添加到购物车 代码实现 1.修改web/views/customer/index.jsp <c:if…

网络层 VIII(网络层设备——路由器)【★★★★★★】

一、冲突域与广播域 这里的“域”表示冲突或广播在其中发生并传播的区域。 1. 冲突域 冲突域是指连接到同一物理介质上的所有结点的集合&#xff0c;这些结点之间存在介质争用的现象&#xff08;能产生冲突的所有设备的集合&#xff09;。也就是说&#xff0c;若这些设备同时发…

ABeam德硕 | 海立集团BI项目正式启动,ABeam中国助力实现以数据之力驱动经营管理

9月2日&#xff0c;由德硕管理咨询&#xff08;上海&#xff09;有限公司作为实施合作伙伴的海立集团BI项目正式启动&#xff0c;海立集团党委书记、总经理缪骏、ABeam大中华区董事长兼总经理中野洋辅出席项目启动仪式。 ABeam大中华区董事长兼总经理中野洋辅 在致辞中表示&am…

【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用

效果图 以上图片分别代表不同用户权限下所能看到的按钮个数, 操作列宽度也会自适应宽度, 就不会一直处于最大宽度, 导致其他权限用户看到的页面出现大量留白问题. 目录 解决方法解决过程中可能出现的问题width赋值时为什么不放update()中btnDom为什么不能直接调用forEach为…

【网络原理】❤️Tcp 连接管理机制❤️ “三次握手” “四次挥手”的深度理解, 面试最热门的话题,没有之一, 保姆式教学 !!!

本篇会加入个人的所谓鱼式疯言 ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…

杰发科技Bootloader(3)—— 基于7801的APP切到Boot

为了方便在APP中跳转到Boot重新进行升级&#xff0c;有两种办法&#xff0c;7840同样可以使用。 1. 调用reset接口进行复位&#xff0c;复位后会先进Boot&#xff0c;再自动跳转到App。 NVIC_SystemReset(); 2. 直接使用跳转指令&#xff0c;参考Boot跳转到App代码&#xff0…

有哪些常用的企业统一门户?为何选择移动应用管理平台WorkPlus

企业统一门户是为了解决企业内部应用分散、管理繁琐的问题&#xff0c;提供集成化的应用平台&#xff0c;旨在提高员工的工作效率和便利性。而在众多的企业统一门户中&#xff0c;作为一款领先的移动应用管理平台&#xff0c;WorkPlus备受青睐。本文将介绍一些常用的企业统一门…

Sentinel 控制界面

一、下载 可视化jar 二、cmd 启动 jar java -Dserver.port8718 -Dcsp.sentinel.dashboard.server127.0.0.1:8718 -Dproject.namesentinel-dashboard -jar sentinel-dashboard-1.8.2.jar 页面访问&#xff1a; http://localhost:8718/#/dashboard/

Elasticsearch Suggesters 自动补全长度设置

问题&#xff1a;在用户输入之后联想词返回长度默认为50&#xff0c;导致返回结果不完全 原因&#xff1a;completion 字段索引时允许存储的文本长度受 max_input_length 参数控制&#xff08;默认为 50 字符&#xff09;。可以在 mapping 中调整这个值 解决&#xff1a;“max…

【西电电装实习】焊接台组、焊接技巧

前言 工训中心 - 电装实习&#xff0c;进行实操的笔记 --- 一、焊台 二、焊枪大功率的握法&#xff08;反握法&#xff09; 三、余锡擦拭 四、pcb板与焊盘 五、焊接技巧 先加热焊盘&#xff0c;再上锡&#xff08;不能不加热焊盘&#xff0c;让锡往下漏&#xff09;上锡的时…

首届世界风筝创意大赛专家委员会成立 艺术大咖共话“风筝文化”

9月6日上午&#xff0c;世界风筝公园首届世界风筝创意大赛专家委员会成立暨座谈会在世界风筝公园召开。来自清华大学、中央音乐学院、中国美术学院等院校的专家学者及国际知名艺术家、设计师齐聚一堂&#xff0c;共同成立大赛专家委员会&#xff0c;并探讨以风筝为主题的艺术创…

简单的springboot log4j2日志配置

简单的springboot log4j2日志配置 1.简介 Log4j2 是 Apache Software Foundation 开发的一个日志记录工具&#xff0c;它是 Log4j 的后续版本&#xff0c;并且在多个方面进行了改进。以下是 Log4j2 的一些关键特性&#xff1a; 性能提升&#xff1a;Log4j2 在设计上做了很多优…

内裤洗衣机哪个牌子好又实惠?诚意盘点五款绝佳内衣洗衣机!

在当今繁忙的生活中&#xff0c;内衣洗衣机已成为我们日常生活中不可或缺的家电。但是&#xff0c;面对市场上众多品牌的内衣洗衣机&#xff0c;那么&#xff0c;到底内衣洗衣机哪个牌子好&#xff1f;本次我将在这篇文章中探讨内衣洗衣机的选购策略&#xff0c;以帮助大家找到…

Java并发编程实战 10 | 线程安全问题

什么是线程安全&#xff1f; 《Java并发实践》的作者 Brian Goetz 对线程安全的定义是&#xff1a;当多个线程访问同一个对象时&#xff0c;如果无需考虑这些线程在运行时的调度策略和交替执行顺序&#xff0c;也不需要进行额外的同步处理&#xff0c;仍然能够得到正确的结果&…