将新查询推送到 vue-router 时导航重复答案

【问题标题】：Navigation Duplicated when pushing new query to vue-router将新查询推送到 vue-router 时导航重复
【发布时间】：2020-03-03 09:25:38
【问题描述】：

我通过以下命令将查询推送到路由器

this.$router.push({ query: { queryKey: ["a", "b", "c"] } });

每次点击元素都会将新值推送到数组中，因此首先查询是“a”，然后是 [“a”, “b”]，然后是 [“a”, “b”, “c”]。这就是我开始遇到问题的地方。第一个和第二个查询都可以，但是第三个尽管与第二个不同，但被 vue 路由器视为重复。

如何解决？

【问题讨论】：

查看 Vue DevTools 中的路由历史记录。
新条目不会添加到路由历史记录中，因为导航不会发生，它会被阻止，就像我导航到同一个 fullPath 一样。
你能添加一个beforeEach 钩子，它会在控制台中记录 FROM 和 TO 吗？
当我在 FROM 和 TO 中从 ?key=val 导航到 ?key=val&key=val2 我在路由器中看到这些值时，路由器从 fullPath /?key=val 导航到 fullPath ?key=val&key= val2。当我想进入下一个查询时， ?key=val&key=val2&key=val3 除了控制台中的 NavigationDuplicated 错误之外，我什么也没看到。 BeforeEach 钩子也被阻塞。

【解决方案1】：

那是我的错误。我正在操作一个变量，我分配了 this.$route.query.key。因此，除了推送到我的变量之外，我还在后台从 this.$route.query 中改变原始数组，而不考虑它。

【讨论】：