vuejs 路由器中的可选参数答案

【问题标题】：Optional param in vuejs routervuejs 路由器中的可选参数
【发布时间】：2018-05-29 05:02:54
【问题描述】：

我需要以两种方式路由到某个组件 - 一种带有参数，一种没有。我搜索了可选参数，但不知何故找不到太多信息。

所以我的路线：

{
    path: '/offers/:member',
    component: Offers,
    name: 'offers',
    props: true,
    meta: {
        guest: false,
        needsAuth: true
    }
},

当我以编程方式使用参数调用它时，一切都很好

this.$router.push({ path: /offers/1234 });

但是我也需要像这样通过导航调用它

<router-link to="/offers">Offers</router-link>

offers 组件接受道具

props: ['member'],

和组件一样

<Offers :offers="data" :member="member"></Offers>

现在我设法让它工作的丑陋方式是复制路线并让其中一个不带道具：

{
    path: '/offers',
    component: Offers,
    name: 'offers',
    props: false,
    meta: {
        guest: false,
        needsAuth: true
    }
},

它确实有效，但我对它不满意 - 在开发模式下 vuejs 也在警告我 [vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }

肯定有办法在组件调用:member="member" 中执行可选参数？

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

对于高级路由匹配模式the manual says：

vue-router 使用 path-to-regexp 作为其路径匹配引擎，因此它支持许多高级匹配模式，例如可选动态段、零个或多个/一个或多个要求，甚至自定义正则表达式模式。查看这些高级模式的文档，以及在 vue-router 中使用它们的示例。

正则表达式页面/手册的路径 => https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters

【讨论】：

【解决方案2】：

此外，您还可以从调用路由的位置发送不同的参数。

<router-link
    :to="{
     name: 'ComponentName',
     params: { member: {}, otherParams: {} }
     }"
>

【讨论】：

【解决方案3】：

只需添加一个问号 ? 即可使其成为可选项。

{
    path: '/offers/:member?',
    ...
},

它适用于 Vue Router 2.0 及更高版本。

来源：https://github.com/vuejs/vue-router/issues/235#issuecomment-245447122

【讨论】：

如果这在指南中会很高兴！
谢谢，这很有帮助。希望在指南中明确提到这一点。
如果参数不在末尾，这也有效。 path: /:lang?/home 将为 /home 和 /es/home 执行。（使用Vue-Router 4.0.3，其他版本我没试过。）
这是一个很好的答案，尤其是在 vue 路由器文档中找不到它。
太棒了，我仍然无法在 officel Vue 路由器文档中找到这个。