vue.js - link - vuejs router goto

Param opcional en enrutador vuejs

Question

Necesito enrutar a un determinado componente de dos maneras: una con un parámetro, otra sin. He buscado parámetros opcionales y de alguna manera no puedo encontrar mucha información.

Así que mi ruta:

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

Cuando lo llamo con el parámetro programáticamente, todo está bien

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

Sin embargo también necesito llamarlo vía nav como este

<router-link to="/offers">Offers</router-link>

El componente de offers acepta el prop.

props: [''member''],

Y componente utilizado como tal.

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

Ahora, de la manera más fea que he logrado hacer que funcione es duplicar la ruta y hacer que uno de ellos no tome accesorios:

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

Realmente funciona, pero no estoy contento con eso, también en el modo dev vuejs me advierte [vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }

Seguramente hay una manera de hacer un parámetro opcional en la llamada del componente :member="member" ?

Answer 1

¿Solo añadiendo un signo de interrogación ? lo hará opcional.

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

Funciona para Vue Router 2.0 en adelante.

Fuente: https://github.com/vuejs/vue-router/issues/235#issuecomment-245447122