So gehen Sie mit dem Verlust von Parametern um, wenn Sie die Seite aktualisieren und Parameter an den Vue-Router übergeben

Überblick

Häufige Szenarien: Klicken Sie auf die Details der Liste, um zur Detailseite zu springen und die detaillierten Daten basierend auf den übergebenen Parametern auf der internen Seite abzurufen.

Es gibt im Allgemeinen mehrere Möglichkeiten, Routenparameter zu übergeben. Im Folgenden wird hauptsächlich die Parameterübergabemethode der programmgesteuerten Navigation router.push vorgestellt:

Methode 1: Parameter über params übergeben

Die Routing-Konfiguration ist wie folgt:

{ 
    Pfad: '/detail/:id', //Wenn auf die ID ein ? folgt, bedeutet dies, dass dieser Parameter optional ist. Name: 'detail', 
    Komponente: Detail 
}

Durch Verwendung des Pfadparameters in $router.push

// Parameter in der Liste übergeben goDetail(row) {
    dies.$router.push({
        Pfad: `/detail/${row.id}`
    })
}

// Holen Sie sich den Parameter this.$route.params.id auf der Detailseite

Übergeben Sie Parameter durch Parameter von $router.push

// Listenseitenparameter goDetail(row) {
    dies.$router.push({
        Name: "Detail",
        Parameter: {
            ID: Zeile.ID
        }
    })
}

// Holen Sie sich this.$route.params.id auf der Detailseite

Hinweis: Bei dieser Methode der Parameterübergabe verwendet der Pfad den Namen, der Pfad den Namen und der Pfad den Namen. Wenn der Pfad verwendet wird, wird er nicht abgerufen. Wenn /:id, d. h. Pfad: „Detail“, nicht in der Routing-Konfiguration hinzugefügt wird, wird die ID nicht in der URL angezeigt. Die Parameter-ID kann weiterhin auf der Detailseite abgerufen werden, aber der Parameter geht nach dem Aktualisieren verloren.

Bei den beiden oben genannten Methoden wird die übergebene Parameter-ID nach der URL angezeigt, wie in der Abbildung dargestellt:

Die übergebenen Parameter werden in der URL angezeigt.

Wenn der Parameter /:id in der Route festgelegt ist, der Parameter jedoch beim Springen nicht übergeben wird, hat dies zur Folge, dass die Seite keinen Inhalt hat oder der Sprung fehlschlägt. Können Sie ihn am Ende hinzufügen? Gibt an, dass dieser Parameter optional ist, d. h. /:id?

Methode 2: Übergeben von Parametern per Abfrage

//Routenkonfiguration{ 
    Pfad: '/detail', 
    Name: "Detail", 
    Komponente: Detail 
}

// Listenseite goDetail(row) {
    dies.$router.push({
        Pfad: '/detail',
        Abfrage: {
            ID: Zeile.ID
        }
    })
}

//Detailseite this.$route.query.id

Hinweis: Die auf diese Weise übergebenen Parameter werden nach der URL in der Adressleiste angezeigt? id =?, ähnlich wie bei der Parameterübergabe „get“. Zur Parameterübergabe muss die Abfrage mit Pfad verwendet werden.

Der übergebene Parameter ist ein Objekt oder ein Array

In einem anderen Fall, wenn ein Objekt oder Array per Abfrage übergeben wird, wird es in der Adressleiste zwangsweise in [Objekt Objekt] konvertiert und der Objektwert kann nach dem Aktualisieren nicht abgerufen werden.

Derzeit können Sie die Methode JSON.stringify() verwenden, um die zu übergebenden Parameter in eine Zeichenfolge zu konvertieren und diese dann mit JSON.parse() auf der Detailseite in ein Objekt zu konvertieren.

let parObj = JSON.stringify(obj)
dies.$router.push({
    Pfad: '/detail',
    Abfrage: {
        'Objekt': parObjekt
    }
})

//Detailseite JSON.parse(this.$route.query.obj)

Obwohl diese Methode Objekte übergeben kann, ist dies bei kleinen Datenmengen kein Problem. Bei großen Datenmengen wird die Adressleiste jedoch sehr lang.

Hinweis: In allen Unterkomponenten werden die Routenparameter über $route statt über $router abgerufen.

Vergleich der oben genannten Parameter und Methoden zur Übergabe von Abfrageparametern:

• Übergeben Sie die Parameter über params + Name von $router.push. Wenn der Parameter params in der Route nicht festgelegt ist, werden die Parameter nach der Route nicht gespleißt, aber die Parameter zur Seitenaktualisierung gehen verloren.
• Wenn Sie Parameter im Pfad von $router.push mitführen oder Parameter über eine Abfrage übergeben, werden die Parameter nach der Adresse aneinandergereiht, wodurch Informationen offengelegt werden.

Methode 3: Verwenden Sie Requisiten, um Komponentenrouten zu entkoppeln

//Routenkonfiguration{ 
    Pfad: '/detail/:id',
    Name: "Detail", 
    Komponente: Detail,
    props: true // Wenn props auf true gesetzt ist, wird $route.params als Komponenteneigenschaft gesetzt}

// Listenseite goDetail(row) {
    dies.$router.push({
        Pfad: '/detail',
        Abfrage: {
            ID: Zeile.ID
        }
    })
}

//Detailseite exportieren Standard {
    Requisiten: {
        // Entkoppeln Sie die in der Route übergebene Parameter-ID von der Props-Eigenschaft der Komponenten-ID: String
    },
    montiert: {
        Konsole.log(diese.id)
    }
}

Darüber hinaus können Sie das Problem des Verlusts von Seitenaktualisierungsparametern auch lösen, indem Sie die Parameter in sessionStorage oder localStorage speichern. Weitere Einzelheiten finden Sie im eigentlichen Projekt.

Oben finden Sie Einzelheiten zum Umgang mit dem Verlust von Parametern beim Aktualisieren der Seite des Vue-Router-Routings. Weitere Informationen zu Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!