[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 也会是重定向后的路径。

相关推荐
一tiao咸鱼2 小时前
前端转 agent # 03 - Pydantic v2 数据校验深入
前端·后端
Cobyte2 小时前
23.Vue Vapor 组件 attrs 的实现
前端·javascript·vue.js
前端H2 小时前
生成式 UI 实战:AI 如何重塑前端界面
前端·人工智能·ui
触底反弹2 小时前
🚀 Node.js path 和 fs 模块,从回调地狱到 async/await 的进化之路!
javascript·后端·node.js
懂懂tty2 小时前
Web前端性能指标
前端
绝世唐门三哥3 小时前
vue3中页面返回时刷新首页的处理方案
开发语言·前端·javascript
sugar__salt3 小时前
Node.js path 与 fs 核心模块完全指南 —— 从路径处理到异步流程控制
javascript·node.js
东方小月3 小时前
agent-skills:把资深工程师的‘工作流’,装进你的AI编程里
前端·架构·代码规范
Maynor9963 小时前
AI Coding 零基础实战教程|第五部分:完整项目案例实操
java·前端·人工智能·claude code·ai coding
binbin_523 小时前
React 井字棋教程:用一个小游戏理解组件和状态
前端·react.js·前端框架