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

Question

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

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

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

说真的，我什至无法在标签内访问它，并且从路由文件导入实际的路由器没有任何作用。

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

Answer 1

当前路线query位于其中，如果您想将其保留在目标中，则this.$route.query可以将整个对象传递到另一条路线：query

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

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

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