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

相关推荐
mayaairi3 分钟前
JS DOM与事件处理完全指南
服务器·前端·javascript
恋猫de小郭16 分钟前
Firebase 如何让全球 Android 和 Flutter 开发者集体 Build Fail
android·前端·flutter
墨白曦煜16 分钟前
智能体架构范式总结(React、Plan-And-Solve、Reflection)
前端·react.js·前端框架
qq_4260039620 分钟前
多语言新增语种全量测试策略的测试范围
前端·javascript·python·自动化
frjc31 分钟前
Node.js 与 npm 极简安装教程
前端·npm·node.js
IMPYLH32 分钟前
HTML 的 <main> 元素
前端·html
深念Y34 分钟前
微服务抽取路线图:从胖单体到 ARM 集群
前端·arm开发·数据库·后端·微服务·云原生·架构
阮小贰1 小时前
干支编码的确定性实现:节气切分 + 1000 条溯源断语(附 JS 源码)
开发语言·javascript·ecmascript
雪芽蓝域zzs1 小时前
Vue3 + Vite本地模拟数据(读取 JSON 数据)
前端
亿元程序员1 小时前
还有高手?用Shader让图片中的3D圆环转起来!
前端