vue.js 更改查询位置 NavigationDuplicated答案

【问题标题】：vue.js change query location NavigationDuplicatedvue.js 更改查询位置 NavigationDuplicated
【发布时间】：2019-09-25 17:26:03
【问题描述】：

当前有查询参数 id=2&p=3 想用 vue-router 改变它试过了：

this.$router.push({query:{id:'2',p:'4'}});

但会引发 NavigationDuplicated

奇怪..

如何只更改查询，以触发监视。

【问题讨论】：

【解决方案1】：

只有当你的参数相同时才会抛出错误，所以你可以在push或replace之前检查你的参数。此外，您可以使用 async/await 或 then/catch 与那里的方法，这里是一个例子：

try {
  if (/* id or p have been changed in this.$route.query */) {
    await this.$router.push({query:{id:'2',p:'4'}});
  }

} catch (err) {
...
}

【讨论】：

【解决方案2】：

我在调整查询时遇到了同样的问题，即出现“NavigationDuplicated”错误。在我的情况下，问题是因为在页面加载时我天真地直接从路由器获取查询对象。我像这样加载它：

beforeRouteEnter (to, from, next) {
  store.dispatch('setQuery', to.query);
  next();
}

setQuery 将设置我的 vuex 存储变量 query。那么问题是这个对象只是指向路由对象内的查询，并且对其进行更改会直接更改 route.query 但 url 不会对此更改做出反应。如果您随后执行以下操作：

watch: {
  query (query) {
    this.$router.push({query: query})
  }
}

您将收到“NavigationDuplicated”错误，因为新的“查询”将与旧的“查询”相同，因为您只是将指针传递给原始对象。

为避免此问题，您可以进行某种深度复制（例如 JSON.parse(JSON.stringify(to.query))），以确保在调整查询时不会直接修改 route.query。

【讨论】：

【解决方案3】：

如果您创建按钮并希望路由推送，只需将这些按钮转换为<router-link :to="routeObject" />。如果目标路由 = 当前路由，Router-link 将不会做出反应，因此它不会显示错误 navigationDuplicate

注意：

routeObject : {
  path : '/search',
  query : {}
}

【讨论】：