Vue如何匹配查询路由答案

【问题标题】：Vue How to match a query routeVue如何匹配查询路由
【发布时间】：2021-01-22 13:23:14
【问题描述】：

在我的vuejs-应用程序中，我的路由如下所示：

myapp.com/pages/verify?query=something123

但在我的router.js 中，我无法确定匹配此路线，因此我可以渲染特定视图。所以我想可能是这样的？：

path: "/pages/verify/:query"

谁能帮帮我？

【问题讨论】：

这能回答你的问题吗？ Matching query param in vue routes
在本例中，您为/pages/verify/<anything> 设置路由模式，其中的值设置为名为@987654327@ 的变量。
如果有帮助别忘了标记答案！

标签： javascript vuejs2

【解决方案1】：

如果你想从 URL 中获取一个参数，你不能使用路由器来做到这一点。

您的路由器中的路径应该只是/pages/verify，然后在您的组件中，您可以使用$route 对象获取URL 参数。

例如，如果您的 URL 是 http://myapp.com/pages/verify?query=something123&param2=abc，那么您可以按以下方式获取这些参数（在组件内）：

this.$route.query.query
this.$route.query.param2

VUE 文档：https://router.vuejs.org/api/#route-object-properties

【讨论】：

【解决方案2】：

您可以做一件事来将查询参数作为道具传递到您的组件中：为该路由定义的道具对象设置一个函数。你可以阅读更多关于“功能模式”on the docs website.

[
    {
        path: '/pages/verify',
        name: 'verify',
        component: MyVerifyPageComponent,
        props: route => ({
            query: route.query,
        }),
    },
]

不过，我应该注意，由于query 对象是每个查询键值对的映射，如果您使用?query=sometext，则需要通过route.query.query 访问它。

但是，在您的原始示例中，您正在设置一个动态路由路径（如通配符），它将匹配 myapp.com/pages/verify/pageid-123 甚至 myapp.com/pages/verify/the/entire/string/past/verify 之类的内容。见https://router.vuejs.org/guide/essentials/dynamic-matching.html#dynamic-route-matching

【讨论】：