当在 url 中推送查询参数同时保持在同一路径上时，Vue.js 中的“NavigationDuplicated”异常是不是有任何解决方法

Posted 2023-02-22

【中文标题】当在 url 中推送查询参数同时保持在同一路径上时，Vue.js 中的“NavigationDuplicated”异常是不是有任何解决方法

【英文标题】：Is there any workaround for "NavigationDuplicated" exception in Vue.js when pushing query parameters in the url while remaining on the same path当在 url 中推送查询参数同时保持在同一路径上时，Vue.js 中的“NavigationDuplicated”异常是否有任何解决方法

【发布时间】：2020-05-05 03:59:41

【问题描述】：

当前网址是

/search

新的网址应该是

/search?foo=bar

由于在页面上应用了一些过滤器，我只想更新我的查询参数在同一条路线上

我的代码：

this.$router.push(query: params)

有一种方法可以使用 catch 块来处理“NavigationDuplicated”错误，但这只是抑制错误，路由中的查询参数仍未更新。

相关问题：

How to use router.push for same path, different query parameter in Vue.js

但这给出了路径'/'但我需要保持在同一页面上

【问题讨论】：

虽然它不能解决您的问题，但一种解决方法是完全重新加载页面，或者将值存储在像 vuex 这样的状态存储中????

都不可行，在过滤器上重新加载整个页面只是糟糕的用户体验，并且存储值不会使 url 可共享给其他人。如果有人打开相同的 url，它应该重新应用这些过滤器

确实如此，您将查询参数写入 vuex 存储，然后从那里读取它们，而不是从查询中读取它们。如果页面已加载，则检查查询并将它们存储到 vuex 存储中。

@WajihSiddiqui ？您的路由器文件中可能有错误。可以贴吗？

【参考方案1】：

您可以添加catch 来解决此错误：

this.$router.push(query:params).catch(() => )

【讨论】：

这个错误处理程序究竟会做什么，我想要实现的任务（将参数推送到 url）失败，无法再次在 catch 中添加此语句