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>

offers 组件接受 prop

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 uses path-to-regexp as its path matching engine, so it supports many advanced matching patterns such as optional dynamic segments, zero or more / one or more requirements, and even custom regex patterns. Check out its documentation for these advanced patterns, and this example of using them in vue-router.

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

vuejs路由器中的可选参数

Optional param in vuejs router

vue.js

vue-router