vuejs路由器中的可选参数

Question

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

所以我的路线：

{
    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>

提供组件接受道具

props: ['member'],

以及用作此类的组件

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

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

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

它实际上是有效的，但我对它不满意-也在开发模式下vuejs警告我[vue-router]重复命名路由定义：{name：“优惠”，path：“/优惠”}

当然有一种方法可以在组件调用：member=“member”中执行可选参数？

Answer 1

此外，你还可以发送不同的参数，从那里你可以调用你的路线。

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

Answer 2

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

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

regexp页面/手册的路径=

Answer 3

只是添加了一个问号 将使其成为可选。

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

它适用于Vue路由器2.0以后的版本。

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