Paramètre optionnel dans le routeur vuejs

Question

J'ai besoin d'acheminer vers un certain composant de deux façons - l'une avec un paramètre, l'autre sans. J'ai fait des recherches sur les paramètres facultatifs, mais je n'ai pas trouvé beaucoup d'informations.

Donc mon itinéraire :

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

Lorsque je l'appelle avec le paramètre programmatiquement, tout va bien.

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

Cependant, j'ai également besoin de l'appeler via nav comme ceci

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

El offers accepte la prop

props: ['member'],

Et composant utilisé comme tel

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

Maintenant, la façon laide que j'ai réussi à faire fonctionner est de dupliquer la route et de faire en sorte que l'une d'entre elles ne prenne pas les accessoires :

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

En fait, cela fonctionne, mais je n'en suis pas satisfait. De plus, en mode dev, Vuejs me prévient. [vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }

Il y a sûrement un moyen de faire un paramétrage optionnel dans l'appel du composant. :member="member" ?

Answer 1

J'ajoute juste un point d'interrogation ? le rendra facultatif.

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

Il fonctionne pour Vue Router 2.0 et plus.

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

Answer 2

Pour les modèles de correspondance avancés le manuel dit :

vue-router utilise path-to-regexp comme moteur de correspondance des chemins, et prend donc en charge de nombreux modèles de correspondance avancés, tels que les segments dynamiques facultatifs, zéro ou plus / une ou plusieurs exigences, et même des modèles regex personnalisés. Consultez sa documentation sur ces motifs avancés et cet exemple de leur utilisation dans vue-router.

chemin d'accès à la page/manuel => https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters

Answer 3

En outre, vous pouvez également envoyer différents paramètres, à partir desquels vous appelez votre itinéraire.

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