vue-router重写push方法，解决相同路径跳转报错

最新推荐文章于 2025-05-16 20:39:30 发布

云烟溪雪

最新推荐文章于 2025-05-16 20:39:30 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/wxl1390/article/details/103720642

vue 专栏收录该内容

45 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中解决重复路由跳转时出现的错误，并通过修改router/index.js文件中的push方法，实现相同路由跳转时触发watch，特别针对使用字符串方式传参的el-menu组件。

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

在router/index.js中添加如下代码：

import Vue from 'vue'
import Router from 'vue-router'
 
 
/**
 * 重写路由的push方法
 * 解决，相同路由跳转时，报错
 * 添加，相同路由跳转时，触发watch (针对el-menu，仅限string方式传参，形如"view?id=5")
 */
const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
  if(typeof(location)=="string"){
    var Separator = "&";
    if(location.indexOf('?')==-1) { Separator='?'; }
    location = location + Separator + "random=" + Math.random();
  } // if这段也可以没有
  return routerPush.call(this, location).catch(error=> error);
}
 
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
   
    }
  ]
})