vuejs路由器中的可选参数

Question

我需要以两种方式路由到某个组件 - 一个带有参数,一个没有.我搜索了可选参数并且不知何故找不到多少信息.

所以我的路线:

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

当我以编程方式用param调用它时,一切都很好

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"吗？

Answer 1

只需添加问号?就可以选择.

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

它适用于Vue Router 2.0.

资料来源:https://github.com/vuejs/vue-router/issues/235#issuecomment-24544712​​2

Answer 2

对于匹配模式的高级路线，手册中说：

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

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