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

Risposte:



1

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

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

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.