将 Vue 查询参数从当前路由传递到 router-link

Question

我知道这不会这么困难，我想做的就是检测查询参数并将其传递给我的组件。 从 Vue 中的组件访问路由器需要做什么？

<router-link :to="{ path: '/', query: { myQuery: /*query parameter here/* } }" >Go There</router-link>

无论我做什么，我都无法弄清楚。 我已经尝试了所有我能在网上找到的东西，但出于某种原因在 Vue 中“this”不存在，我真的准备放弃并将 go 返回到 Angular。

说真的，我什至无法在标签内访问它，从路由文件导入实际路由器也无济于事。

我该如何做到这一点？ 我觉得在任何框架中从 url 获取查询参数不应该这么复杂。 我整天都在阅读手册，有人可以帮我吗？

Answer 1

当前路线的query在this.$route.query中，如果您想将其保留在目的地，您可以将整个query object 传递到另一条路线：

<router-link
  :to="{ path: '/', query: $route.query }"
>
  Go There
</router-link>

如果您只想传递特定的查询参数：

<router-link
  :to="{ path: '/', query: { myQuery: $route.query.myQuery }}"
>
  Go There
</router-link>