如何使用Vue路由器操作vue.js中的查询字符串

Question

我有一个带有标记组件的 Vue.js 应用程序。我想添加一个 url 组件，例如 https://thisdomain.com/some?tag_ids=3,7,11，用户可以通过在 UI 中切换标签来添加 tag_ids。

虽然这有助于维护应用程序中的 tag_ids。我还想让它们在浏览器 url 中呈现，这样如果 url 是共享的，它看起来是一样的。我正在使用 vue-router，我想将 tag_ids 添加到查询字符串中，但不强制路径中的新路由。我尝试过类似的方法：

   this.$router.push({ path: '/', tag_ids: this.selectedTagIds })

和

   this.$router.replace({ path: '/', tag_ids: this.selectedTagIds })

但这不起作用。知道如何通过 this.$router 操作查询参数吗？

Answer 1

你可以使用params:

//navigation
this.$router.push({ name: 'some', params: { tag_ids: this.selectedTagIds } })

//route
{ path: '/some', name: 'some', component: Some }

或者，您可以像这样使用query：

this.$router.push({ path: '/some', query: { tag_ids: this.selectedTagIds } })