Question

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

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

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

如果在组件上放置一个beforeRouteUpdate钩子，则可以看到新的查询参数出现在“至”对象中。

即使仅查询参数已更改，如何使Vue执行导航？

Answer 1

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

文档链接-In-Component Guards - beforeRouteUpdate

如果在组件上放置一个beforeRouteUpdate钩子，则可以看到新的查询参数出现在“至”对象中

这意味着您已经正确地完成了所有操作，因为您在组件防护中看到了新参数，因此，接下来，您需要按照文档和示例中的规定进行操作

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()
  })
 }

使用Vue路由器链接导航，仅更改查询参数，而不更改路径

1 个答案: