[ElemeFE/element][Bug Report] 升级vue-router至3.1以后版本,导航组件重复点击报错 NavigationDuplicated

2024-08-20 397 views
9
Element UI version

2.11.1

OS/Browsers version

Win/chrome

Vue version

2.6.10

Reproduction Link

https://github.com/vuejs/vue-router/issues/2881

Steps to reproduce

升级vue-router至新版本后,使用 el-menu 来导航页面,重复点击某一个导航项就会在控制台报错,vue-router官方给出了一些修改方法,element这边是不是要同步修改

What is Expected?

不报错 NavigationDuplicated

What is actually happening?

控制台 NavigationDuplicated

回答

9

请问解决了吗?

4

先卸载vue-router,再安装3.0.7版本可以解决。 npm uninstall vue-router npm install vue-router@3.0.7

1

使用 vue-router": "^3.0.7" 版本可以解决。

2

image

Uncaught (in promise) Error: Redirected when going from "????" to "????" via a navigation guard.

router 3.5.0+ 会有这个问题,在不降低版本的情况下,不修改发布elementUI 也能解决。具体原因参加router源码hooks部分的 to 验证 前提: 【1】不降低router版本 【2】不构建与发布私有elementUI 【3】不修改vue-router ,只针对单个项目固定版本的elementUI

### 解决:

在main.js里

 import {
  Menu
} from 'element-ui';

重写 Menu的 handleItemClick 方法 , 具体代码如下,至于想如何处理,看自己系统业务,这里只提供基础的解决办法。

Menu.methods.handleItemClick = function handleItemClick(item) {
  var _this = this;

  var index = item.index,
      indexPath = item.indexPath;

  var oldActiveIndex = this.activeIndex;
  var hasIndex = item.index !== null;

  if (hasIndex) {
    this.activeIndex = item.index;
  }

  this.$emit('select', index, indexPath, item);

  if (this.mode === 'horizontal' || this.collapse) {
    this.openedMenus = [];
  }

  if (this.router && hasIndex) {
    this.routeToItem(item, function (error) {
      _this.activeIndex = oldActiveIndex;
      if (error) {
        // vue-router 3.1.0+ push/replace cause NavigationDuplicated error 
        // https://github.com/ElemeFE/element/issues/17044
        if (error.name === 'NavigationDuplicated') return;
        if(error.message){
          if(error.message.indexOf('when going') < 0){
            console.error(error);
          }
        }
        console.log('my Menu.methods.handleItemClick')
      }
    });
  }
}
5

vue-router 3.5.2 点击的导航被全局beforeEach重定向到相同路径(业务需要修改query)后仍会出现这个错误 断点后发现error没有name属性,因为不是NavigationDuplicated错误

QQ截图20210727195333

https://github.com/vuejs/vue-router/blob/v3.5.2/src/util/errors.js 目前只忽略了duplicated错误,redirected通常也是预期行为,是不是也忽略掉会更好?

vue-router新增了isNavigationFailure方法来判断错误类型

import VueRouter from 'vue-router'
const { isNavigationFailure, NavigationFailureType } = VueRouter