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

相关推荐
daols881 分钟前
vue 表格vxe-table 实现紧凑型表格的方式
前端·javascript·vue.js
恋猫de小郭18 分钟前
Flutter 多窗口支持类型和 API 介绍
android·前端·flutter
必须会一定会22 分钟前
AI 前端项目验收:Playwright 截图、响应式视口、控制台错误与交互回归
前端·人工智能·gpt·交互·ai编程
Java搬码工24 分钟前
VUE3使用教程
前端·javascript·vue.js
小白勇闯网安圈27 分钟前
Vue 3 核心进阶:组合式 API、响应式系统与 <script setup>
前端·javascript·vue.js
张风捷特烈29 分钟前
当 AI 遇见 Flutter | 打造 500+ Widget 专属Logo
android·前端·flutter
雪芽蓝域zzs32 分钟前
Vue3 + JS + pnpm 创建项目
开发语言·javascript·ecmascript
蜡台1 小时前
Uniapp 开发H5 页面跳转拦截
前端·javascript·uni-app
IT爱学堂1 小时前
Three.js可视化企业实战WEBGL课,2023年全新WEB 3D THREEJS技术
前端·javascript·webgl