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

相关推荐
遇到困难睡大觉哈哈11 分钟前
JavaScript面向对象
开发语言·javascript·ecmascript
檀越剑指大厂14 分钟前
【Python系列】异步 Web 服务器
服务器·前端·python
我是Superman丶16 分钟前
【前端】js vue 屏蔽BackSpace键删除键导致页面后退的方法
开发语言·前端·javascript
Hello Dam17 分钟前
基于 Spring Boot 实现图片的服务器本地存储及前端回显
服务器·前端·spring boot
小仓桑19 分钟前
利用 Vue 组合式 API 与 requestAnimationFrame 优化大量元素渲染
前端·javascript·vue.js
Hacker_xingchen19 分钟前
Web 学习笔记 - 网络安全
前端·笔记·学习
天海奈奈20 分钟前
前端应用界面的展示与优化(记录)
前端
多多*41 分钟前
后端并发编程操作简述 Java高并发程序设计 六类并发容器 七种线程池 四种阻塞队列
java·开发语言·前端·数据结构·算法·状态模式
ᥬ 小月亮43 分钟前
Layui表格的分页下拉框新增“全部”选项
android·javascript·layui
过期的H2O243 分钟前
【H2O2|全栈】JS进阶知识(十一)axios入门
开发语言·javascript·ecmascript·axios