Paramètre facultatif dans le routeur vuejs

Question 1

Je dois acheminer vers un certain composant de deux manières - une avec un paramètre, une sans. J'ai recherché des paramètres facultatifs et je ne trouve pas beaucoup d'informations.

Donc mon itinéraire:

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

Quand je l'appelle avec le param par programmation, tout va bien

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

Cependant, je dois aussi l'appeler via la navigation comme ceci

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

Le offerscomposant accepte le prop

props: ['member'],

Et composant utilisé comme tel

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

Maintenant, la mauvaise façon dont j'ai réussi à le faire fonctionner est de dupliquer l'itinéraire et de faire en sorte que l'un d'eux ne prenne pas d'accessoires:

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

Cela fonctionne réellement, mais je ne suis pas satisfait - également 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 des paramètres facultatifs dans l'appel de composant :member="member"?

Question 2

Le simple fait d'ajouter un point d'interrogation le ?rendra facultatif.

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

Cela fonctionne pour Vue Router 2.0 et les versions ultérieures.

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

Question 3

De plus, vous pouvez également envoyer différents paramètres, d'où vous appelez votre itinéraire.

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

Question 4

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

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

chemin-vers-expression régulière page / manuel => https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters

Answer 1