Übergabe von Parametern über die Parameter des Vue-Attributs $route

In diesem Artikel werden hauptsächlich die Parameter vorgestellt, die das Vue-Attribut $route durchlaufen. Jetzt kann ich es mit Ihnen teilen.

Vue-Wertübergabe Das Übergeben von Parametern mit Vue ist zwei verschiedene Dinge

Concept Map

Prinzip

Das Prinzip der Vue-Übergabe von Parametern liegt hauptsächlich in Vue.$route.params (auch $route.query)

$route ist das Attribut von Vue, params ist das Attribut von $route, verwenden Sie zum Speichern von Schlüssel-Wert-Paaren (Objektform, {key:value}) viele Attribute (Schlüssel-Wert-Paare, Attribute, Attributwerte) darin

Liste:

Durch Durchsuchen des Vue Devtools-Plug-Ins (Vue Developer Tool-Plug-In) können Sie die spezifischen Daten im $route-Attribut sehen:
$route.params, **Es kann sein Sagte, dass $route ein Zwischencontainer ist**, bei dem es sich um eine Schlüssel-Wert-Paar-Methode handelt. Auf diese Weise werden die Parameter beim Ausführen einer Aktion auf dieser Seite an $route.params und auf einer anderen Seite übergeben Parameter können von $route.params abgerufen werden. Das ist es.

Das Definieren von

//router >> index.js
{
        path: '/Page9/:abc/:cde',
        name: 'Page9',
        component: Page9
    }

bedeutet, dass ich die Attribute „abc“ und „cde“ speichern möchte " in Vue.$route.params, die als Attributnamen und Schlüsselnamen verwendet werden,

Der spezifische Wert des Attributwerts wird durch die Änderung des Triggerpfads nach dem Klicken auf die Route bestimmt. Schreiben Sie einfach was auch immer die Sie übertragen möchten, wie zum Beispiel

//App.vue
<router-link>
          点击就跳转到page9,并同时传参到Vue.$route.params
</router-link>

//Page9.vue
<template>
    <p>
        </p>
<h1 id="msg">{{ msg }}</h1>
        <p>{{this.$route.params}}</p>
        <h3 id="拿数据">拿数据</h3>
    
</template>

<script>
    export default{
        name:&#39;Page9&#39;,
        data(){
            return{
                msg:&#39;I am Page9.vue&#39;
            }
        },
        methods:{
            nsj(){
                this.msg = this.$route.params.asd
            }
        }
        
    }
</script>

, was bedeutet, dass Vue.$route.params am Ende { "abc" : "gigi" ,"cde" : "lkjdk7338"}

Oder verwenden Sie Programmierrouting, um die Parameter zu schreiben, die im Skript übergeben werden sollen js :

html:

<p><button>点击就跳转到page9,并同时传参到</button></p>

js:

sj1() {
                this.$router.push({
                    path: '/Page9',
                    name: 'Page9',
                    params: {
                        abc: this.mydata,
                        cde: 'dlj'
                    }
                })

Das bedeutet, dass Vue.$route.params am Ende die Daten {"abc" : this.mydata, "cde" : ' 'dlj'' speichert.🎜>

So erhalten Sie den Wert:

Es ist ganz einfach:

Beziehen Sie es einfach direkt von Vue.$route.params
{{ $route.params.abc }} --> „gigi“ oder den spezifischen Wert von this.mydata

{{ $route.params.abc }} --> " lkjdk7338 "

Das Obige ist der gesamte Inhalt des Artikels. Ich hoffe, dass er für das Lernen aller hilfreich sein wird Achten Sie auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Vue-Router+Nginx-Nicht-Root-Pfadkonfigurationsmethode

Wie Vue die dynamische Hinzufügung löst von addRoutes Das Problem einer ungültigen Aktualisierung nach dem Routing

Das obige ist der detaillierte Inhalt vonÜbergabe von Parametern über die Parameter des Vue-Attributs $route. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!