vue.js - 使用 Vue router-link 进行导航，仅更改查询参数，而不更改路径

Question

在 Vue.js 中，我使用 <router-link>导航，如下所示:

<router-link :to="{ path: '/', query: { q: item.id, lang: lang } }">{{item.name}}</router-link>

这不会更新路径，只会更新查询字符串。尽管生成的 URL 格式正确，但它不会触发 Vue 中的导航，显然是因为路径没有更改，仅更改了查询字符串。

如果我在组件上放置 beforeRouteUpdate Hook ，我可以看到新的查询参数出现在“to”对象中。

如何让 Vue 执行导航，即使只更改了查询参数？

Answer 1

您很可能已经解决了这个问题，因此这个答案可能对遇到此问题的其他人有用。

文档链接 - In-Component Guards - beforeRouteUpdate

If I put a beforeRouteUpdate hook on my component, I can see that the new query parameters appear in the "to" object

这意味着您所做的一切都是正确的，因为您在组件防护中看到了新参数，所以接下来，您需要做的是按照文档和示例中的规定进行操作

Fetching After Navigation

所以您现在所要做的就是使用这些新参数获取新数据

  beforeRouteUpdate (to, from, next) {
     this.post = null
     // replace `getItem` with your data fetching util / API wrapper

     getItem(to.params.q, to.params.lang, (err, post) => {
       this.post = post
     next()
  })
 }