Parametro opzionale nel router vuejs

105

Ho bisogno di indirizzarmi a un determinato componente in due modi: uno con un parametro, uno senza. Ho cercato parametri opzionali e in qualche modo non riesco a trovare molte informazioni.

Quindi il mio percorso:

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

Quando lo chiamo con il parametro a livello di programmazione, va tutto bene

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

Tuttavia devo anche chiamarlo tramite nav in questo modo

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

Il offerscomponente accetta l'elica

props: ['member'],

E componente utilizzato come tale

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

Ora il brutto modo in cui sono riuscito a farlo funzionare è duplicare il percorso e fare in modo che uno di loro non prenda oggetti di scena:

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

In realtà funziona, ma non sono soddisfatto - anche in modalità dev vuejs mi avvisa [vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }

Sicuramente c'è un modo per fare param facoltativo nella chiamata del componente :member="member"?

vue.js

— yoyoma
fonte

232

La semplice aggiunta di un punto interrogativo ?lo renderà facoltativo.

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

Funziona per Vue Router 2.0 in poi.

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

— Jacob Goh
fonte

20

Mi piacerebbe se questo fosse nella guida!

— Damon

3

Grazie, è molto utile. Vorrei che questo fosse chiaramente menzionato nella guida.

— Gaurav Joshi

1

Inoltre, puoi anche inviare diversi parametri, da dove chiami il tuo percorso.

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

— Amit Kadam
fonte

0

Per i modelli di corrispondenza avanzati il manuale dice :

vue-router utilizza path-to-regexp come motore di corrispondenza del percorso, quindi supporta molti modelli di corrispondenza avanzati come segmenti dinamici opzionali, zero o più / uno o più requisiti e persino modelli regex personalizzati. Controlla la sua documentazione per questi modelli avanzati e questo esempio di utilizzo in vue-router.

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

— JCH77
fonte