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

【问题标题】：Pass Vue query parameter from current route to router-link将 Vue 查询参数从当前路由传递到 router-link
【发布时间】：2021-04-19 03:13:54
【问题描述】：

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

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

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

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

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

【问题讨论】：

当你说“检测”时，你的意思是从当前路线？当您说“通过它”时，您的意思是<router-link>。所以，要明确一点，您想将当前路由中的相同查询传递到另一条路由的链接中吗？
@Dan 100% 在鼻子上，是的

【解决方案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>

【讨论】：