Необов’язковий парам в маршрутизаторі vuejs

Мені потрібно перейти до певного компонента двома способами - один із параметром, другий без. Я шукав необов'язкові параметри, і якось не можу знайти багато інформації.

Тож мій маршрут:

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

Коли я програмно називаю це з параметром, все добре

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

Однак мені також потрібно називати це через nav, як це

<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
    }
},

Це насправді працює, але я цим не задоволений - також у режимі Dev vuejs попереджає мене [vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }

Звичайно, є спосіб зробити необов'язковий параметр у виклику компонента :member="member"?

Просто додавання знака питання ?зробить його необов’язковим.

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

Він працює для Vue Router 2.0 і далі.

Джерело: https://github.com/vuejs/vue-router/issues/235#issuecomment-245447122

Крім того, ви також можете надсилати різні параметри, звідки ви телефонуєте за маршрутом.

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

Для вдосконалених моделей відповідності в керівництві сказано :

vue-router використовує шлях до regexp як свій механізм відповідності шляху, тому він підтримує безліч вдосконалених моделей узгодження, таких як необов'язкові динамічні сегменти, нульовий або більше / один або більше вимог і навіть власні шаблони регулярного вирівнювання. Ознайомтеся з документацією щодо цих вдосконалених шаблонів та цим прикладом використання їх у vue-router.

path-to-regexp page / manual => https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters