Необязательный параметр в маршрутизаторе vuejs

Question 1

Мне нужно выполнить маршрутизацию к определенному компоненту двумя способами: один с параметром, другой без него. Я искал необязательные параметры и почему-то не могу найти много информации.

Итак, мой маршрут:

{
    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Компонент принимает опору

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"?

Question 2

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

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

Он работает для Vue Router 2.0 и новее.

Источник: https://github.com/vuejs/vue-router/issues/235#issuecomment-245447122

Question 3

Кроме того, вы также можете отправлять разные параметры, откуда вы вызываете свой маршрут.

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

Question 4

Для расширенных шаблонов сопоставления в руководстве говорится :

vue-router использует path-to-regexp в качестве механизма сопоставления путей, поэтому он поддерживает множество расширенных шаблонов сопоставления, таких как необязательные динамические сегменты, ноль или несколько / одно или несколько требований и даже настраиваемые шаблоны регулярных выражений. Ознакомьтесь с его документацией по этим расширенным шаблонам и с этим примером их использования в vue-router.

путь к странице регулярного выражения / руководство => https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters

Answer 1