• home > webfront > ECMAS > vue >

    Vue-router 报NavigationDuplicated

    Author:zhoulujun Date:

    vuejs vue-router 异常报Uncaught (in promise) NavigationDuplicated ,原因在于跳转相同路径,两次或以上,就会复现

    vue-router升级到3.0后的版本,比如我用的版本:"vue-router": "^3.0.2",

    使用vue-router进行路由跳转,跳转相同路径,两次或以上,就会报错

    因在于Vue-router在3.1之后把$router.push()方法改为了Promise。所以假如没有回调函数,错误信息就会交给全局的路由错误处理,因此就会报上述的错误。

    如果你仔细观察并复现了多次错误你会发现,vue-router是先报了一个Uncaught (in promise)的错误(因为push没加回调),然后再点击路由的时候才会触发NavigationDuplicated的错误(路由出现的错误,全局错误处理打印了出来)。

    修改vue-router版本

    只有手动降级到 3.0

    npm i vue-router@3.0

    我是选中升级包

    npm view vue-router versions --json
    npm i vue-router@3.13

    第二种解决办法就是

    禁止全局路由错误处理打印

    这个也是vue-router开发者给出的解决方案:

    import Router from 'vue-router'
    
    const originalPush = Router.prototype.push
    Router.prototype.push = function push(location) {
      return originalPush.call(this, location).catch(err => err)
    }

    vue-router的开发者也给出了解决方法,你需要为每个router.push增加回调函数。

    router.push('/location').catch(err => {err})

    参考文章:

    vue router 报错: Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解决方法

    Vue-router 报NavigationDuplicated的可能解决方案


    转载本站文章《Vue-router 报NavigationDuplicated》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8394.html