Whidy Writes

Vue Router的Push方法报错NavigationDuplicated: Navigating to current location

创建于:最后更新:whidy

最近使用Vue Router的Push方法,针对同一个路径的不同参数的页面进行导航的时候就会报错 NavigationDuplicated: Navigating to current location ,很纳闷,我们来看看是怎么回事吧。

这个Vue Router报错 NavigationDuplicated: Navigating to current location 的问题我印象中以前是没有遇到过的,查了些资料,原来Vue Router在 3.1.x 版本后就有了,而且是一年前。

而相对完整的解决方案出自No stacktrace on NavigationDuplicated error #2881

你可以给你要push的路径加一个空的错误捕获回调,例如:

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

而全局修改则可以通过修改原有的push方法,例如:

import Router from 'vue-router'

const originalPush = Router.prototype.push
Router.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)
}

这个问题就算解决了,那么深究一下,这个方案究竟好不好?

其实对于Vue框架,我的理解一直是做小型应用,至少他最早要解决的就是用户交互体验增强,一般来说切换大量参数来实现页面内容变更的逻辑就有些不合理(如果是少量参数,可以使用动态路由而不应该用query);另一方面,使用Vue应用本身就不应该有重载带有大量参数的页面来渲染对应数据的页面,本身设计就是无状态的,虽然可以通过Vuex结合Cookies/Storage来实现。但是我个人觉得这是偏离初衷的。

说了堆废话,结果还是需要曲线救国的各种奇怪解决办法,然而,对于需要大量query参数的应用,我个人觉得还是使用SSR渲染框架会好些,哪怕是传统的JSP/PHP框架。

最后,关于这个问题,其实在Vue.js的RFCS中也有记录,请参阅0033-router-navigation-failures.md,或许在未来的Vue Router版本中(Maybe v4)会改进这个问题。

  • Expose NavigationFailureType and isNavigationFailure in vue-router@3 so that Navigation Failures can be told apart from regular Errors.
  • afterEach and onError are relatively simple to migrate, most of the time they are not used many times either.
  • router.push doesn't reject when navigation fails anymore. Any code relying on catching an error should await the promise result instead.
avatar

Whidy

一名爱折腾的前端开发工程师,喜欢玩游戏听歌写东西 ฅʕ•̫͡•ʔฅ