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

相关推荐
咏方舟【长江支流】1 分钟前
【前端1】单据编辑 -EasyUI/Vue/React/Bootstrap 主流框架实现订单单据主子表显示和编辑比较,哪个你最易入门?
前端·vue.js·easyui·咏方舟-长江支流·userbaodatagrid
m0_579146653 分钟前
Element UI 表格合并单元格完全指南:从原理到实战
前端·vue.js·elementui
sibylyue8 分钟前
# Web端流媒体JS播放器开源库
前端·javascript·开源
码视野19 分钟前
基于 Vue3 + Element Plus 的【基于物联网与深度学习的智慧工业园区能耗监测与光储充一体化微电网协同调度系统】设计与实现(附完整源码与PRD)
前端·人工智能·深度学习·物联网·vue3
铁皮饭盒23 分钟前
网页端, 5.5mb谷歌模型, 识别躯干, 视频都不卡
前端·javascript·后端
雪芽蓝域zzs38 分钟前
Prettier (代码格式化)配置详解
前端·vue.js
晴天1639 分钟前
Gradio 与 Streamlit:Python 快速构建 Web 应用的双子星-Day28
开发语言·前端·python
码哥DFS44 分钟前
LRU缓存
前端·javascript·缓存
mldong1 小时前
一条命令,十分钟:jeeflow 工作流应用的六语言一键部署
前端·后端·架构
zzzzzz3102 小时前
别急着把页面做成舞台:从 react-bits 看动画组件该怎么选
javascript·react.js·开源