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

Answer 2

此外，您还可以从调用路线的地方发送不同的参数。

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

Answer 3

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

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

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

vuejs路由器

3 个答案: