vue 当前路由重复点击跳转报错

最新推荐文章于 2025-05-15 14:49:14 发布

YanHie

最新推荐文章于 2025-05-15 14:49:14 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：知识点

本文链接：https://blog.youkuaiyun.com/YanHie/article/details/110186494

知识点专栏收录该内容

3 篇文章

订阅专栏

当在Vue应用中连续点击同一路由时，可能会出现路由报错，但不影响页面运行。为消除这个错误提示，可以尝试在router配置中添加特殊处理或在菜单跳转时判断，如果路由相同则先跳转到刷新页面再返回原页面，实现当前路由的重新加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当菜单路由重复点击时，会出现以下报错：
随便找了个项目搞了个报错
虽然没有什么影响(不知道深层有什么影响，页面运行反正没啥问题)，但是有个报错看着就毕竟闹心。
有以下解决方案：

router配置中添加代码块不再报错

// 解决Vue-Router升级导致的Uncaught(in promise) navigation guard问题
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject)
    return originalPush.call(this, location, onResolve, onReject);
  return originalPush.call(this, location).catch((err) => err);
};

增加刷新页面，重新加载当前页
刷新页面

<!-- 空页面，负责中转到目标页面 -->
<template>
  <div></div>
</template>
 
<script>
export default {
  name: 'refresh',
  data() {
    return {};
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.$router.replace(from.path);
    });
  },
};
</script>

路由

{
  path: "/refresh",
  name: "refresh",
  hideInMenu: true,
  component: () =>
    import( /* webpackChunkName: "login" */ "@/components/refresh/refresh"),
},

菜单跳转时

 routeJump(item) {
      const toPath = item.path;
      const thePath = this.$route.path;
      if (toPath == thePath) {
        this.$router.replace({ path: '/refresh' });
      } else {
        this.$router.push({ name: item.name });
      }
  },

如果当前路由与跳转路由相同，则跳转到refresh页面中，再跳回原页面，重新加载一次当前路由。