[Vue]防止路由重复跳转

Vue防止路由重复跳转

js 复制代码
// 获取当前路由的原始路径(包括重定向的处理)
const currentPath = this.$route.redirectedFrom || this.$route.path;

// 判断目标路径是否与当前路径相同
if (currentPath !== item.url) {
  this.$router.push({ path: item.url });
} else {
  console.log('目标页面与当前页面相同,不进行跳转');
}
  • this.$route.redirectedFrom

重定向的来源

  • this.$route.path

this.$route.path:这是当前路由的路径(不包括查询参数和哈希)。它表示的是当前页面的实际路径,比如 /strategy/security-policy。当路由发生重定向时,this.$route.path 会反映最终的目标路径(即重定向后的路径)

  • this.$route.fullPath

这是当前路由的完整路径,包含路径、查询参数和哈希。例如,/strategy/security-policy?id=123#section1。如果路由发生了重定向,fullPath 也会是重定向后的路径。

相关推荐
程序员mine1 分钟前
Web服务密码存储安全详解:从哈希到密钥派生的演进
前端·后端
如果超人不会飞2 分钟前
TinyRobot Sender打造强大的AI聊天输入体验
前端·vue.js
爱吃生蚝的于勒6 分钟前
QT开发第三章——常用控件
linux·服务器·开发语言·前端·javascript·c++·qt
xuankuxiaoyao19 分钟前
Axios-图书列表案例
开发语言·前端·javascript
meilindehuzi_a21 分钟前
深入理解 JavaScript 数据类型:从冯·诺依曼架构到八种数据类型
javascript
影寂ldy22 分钟前
C# 多播委托
前端·javascript·c#
dy171723 分钟前
Vue3 多文件上传
前端·javascript·vue.js
带娃的IT创业者24 分钟前
深度解析 Bun:重新定义 JavaScript 运行时的性能边界
开发语言·javascript·node.js·ecmascript·bun·运行时
文阿花32 分钟前
Echarts实现3D饼状图
前端·javascript·echarts·饼状图
智码看视界39 分钟前
老梁聊全栈系列:Vue2与Vue3核心区别及学习路线指南
前端·vue.js·学习