Optionaler Parameter in vuejs Router


104

Ich muss auf zwei Arten zu einer bestimmten Komponente routen - eine mit einem Parameter, eine ohne. Ich habe nach optionalen Parametern gesucht und kann irgendwie nicht viele Informationen finden.

Also meine Route:

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

Wenn ich es programmgesteuert mit dem Parameter aufrufe, ist alles in Ordnung

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

Allerdings muss ich es auch so über nav anrufen

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

Die offersKomponente akzeptiert die Stütze

props: ['member'],

Und Komponente als solche verwendet

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

Jetzt ist die hässliche Art und Weise, wie ich es geschafft habe, die Route zu duplizieren und einen von ihnen dazu zu bringen, keine Requisiten zu nehmen:

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

Es funktioniert tatsächlich, aber ich bin nicht zufrieden damit - auch im Dev-Modus warnt mich vuejs [vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }

Sicher gibt es eine Möglichkeit, optionale Parameter im Komponentenaufruf auszuführen :member="member"?

Antworten:



1

Darüber hinaus können Sie auch verschiedene Parameter senden, von wo aus Sie Ihre Route aufrufen.

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

0

Für erweiterte Übereinstimmungsmuster heißt es im Handbuch :

Der vue-router verwendet Path-to-Regexp als Pfadanpassungs-Engine und unterstützt daher viele erweiterte Übereinstimmungsmuster wie optionale dynamische Segmente, null oder mehr / eine oder mehrere Anforderungen und sogar benutzerdefinierte Regex-Muster. Lesen Sie die Dokumentation zu diesen erweiterten Mustern und dieses Beispiel für deren Verwendung in vue-router.

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

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.