Vue Router vue-router ausführliche Erklärung Anleitung

Chinesische Dokumentation: https://router.vuejs.org/zh/

Vue Router ist der offizielle Routing-Manager für Vue.js. Es ist tief in den Kern von Vue.js integriert und erleichtert die Erstellung von Single-Page-Anwendungen. Routing kann eigentlich als Zeigen verstanden werden, das heißt, wenn ich auf einer Seite auf eine Schaltfläche klicke, muss ich zur entsprechenden Seite springen, was ein Routing-Sprung ist.

Lassen Sie uns zunächst drei Wörter lernen (Route, Routen, Router):

• Route: Zunächst einmal ist es eine Singularzahl, die Route bedeutet, das heißt, wir können darunter eine einzelne Route oder eine bestimmte Route verstehen;
• Routen: Es handelt sich um eine Pluralzahl, was bedeutet, dass es nur dann eine Pluralzahl sein kann, wenn es mehrere Mengen darstellt; das heißt, wir können es als eine Sammlung mehrerer Routen verstehen. In JS gibt es nur zwei Arten von Sammlungen, die mehrere unterschiedliche Zustände darstellen: Arrays und Objekte. Tatsächlich ist die offizielle Definition von Routen ein Array; wir erinnern uns also daran, dass Routen eine Sammlung mehrerer Arrays darstellen;
• Router: Übersetzt als Router sind alle oben genannten Routen. Dies ist ein Router. Wir können ihn als einen Container verstehen, der die beiden oben genannten enthält, oder als einen Manager, der für die Verwaltung der beiden oben genannten verantwortlich ist. Nehmen wir als Beispiel ein gängiges Szenario: Wenn der Benutzer auf der Seite auf eine Schaltfläche klickt, sucht der Router in den Routen nach der Route, d. h. der Router sucht in der Routensammlung nach der entsprechenden Route.

Schauen wir uns eine kleine Demo an (der Artikel ist etwas lang, also lesen Sie ihn geduldig. Nur wer langsam lernt, kann schnell Fortschritte machen. Natürlich können Sie mitmachen und es eintippen):

Zuerst müssen Sie vue-cli installieren, um eine Vue-Entwicklungsumgebung zu erstellen (ich werde hier nicht erklären, wie man es installiert, gehen Sie einfach zu Baidu. Wenn Sie dieses Problem nicht selbst lösen können, nützen Ihnen die folgenden Kenntnisse möglicherweise nicht viel)

Nach der Installation von vue-cli sieht unsere Projektverzeichnisstruktur wie folgt aus:

Anschließend geben wir npm install vue-router -g in die Kommandozeile ein, um vue-router zu installieren. Nach der Installation können wir die Datei package.json öffnen, in der wir die Versionsnummer von vue-router sehen können.

An diesem Punkt sind unsere Vorbereitungen abgeschlossen und wir sind bereit, eine Demo zu schreiben.

Wir erstellen drei neue Dateien im src-Verzeichnis, nämlich page1.vue, page2.vue und router.js:

Seite1.vue:

<Vorlage>
    <div>
        <h1>Seite1</h1>
        <p>{{msg}}</p>
    </div>
</Vorlage>
<Skript>
    Standard exportieren {
        Daten () {
            zurückkehren {
                msg: „Ich bin eine Komponente von Seite 1“
            }
        }
    }
</Skript>

Seite2.vue:

<Vorlage>
    <div>
        <h1>Seite2</h1>
        <p>{{msg}}</p>
    </div>
</Vorlage>
<Skript>
    Standard exportieren {
        Daten () {
            zurückkehren {
                msg: „Ich bin eine Komponente von Seite 2“
            }
        }
    }
</Skript>

router.js

//Vue vorstellen
importiere Vue von „vue“;
// Vue-Router einführen
importiere VueRouter von „vue-router“;
//Bibliotheken von Drittanbietern müssen verwendet werden, bevor sie verwendet werden können Vue.use(VueRouter)
//Seite1 referenzieren. Importiere Seite1 von './page1.vue';
//Referenzseite2 importiere Seite2 von './page2.vue';

//Definieren Sie eine Sammlung von Routen, Array-Typ const routes=[
    //Einzelne Routen sind alle Objekttypen, Pfad stellt den Pfad dar, Komponente stellt die Komponente dar {Pfad:'/Seite1',Komponente:Seite1},
    {Pfad:"/Seite2",Komponente:Seite2}
]

//VueRouter instanziieren und Routen hinzufügen const router = new VueRouter({
//ES6-Abkürzung, gleich Routen: Routen
    Routen
});

//Wirf dieses Instanzobjekt, um das externe Lesen und den Zugriff auf den Export des Standardrouters zu erleichtern

Hier ändern wir main.js

Vue von „vue“ importieren
App aus „./App“ importieren
//Referenz router.js
Router aus „./router.js“ importieren
Vue.config.productionTip = falsch

/* eslint-deaktivieren Sie no-new */
neuer Vue({
  el: '#app',
//Muss in das Instanzobjekt des Vue-Routers eingefügt werden,
  Komponenten: { App },
  Vorlage: '<App/>'
})

App.vue ändern

<Vorlage>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
//Router-Link definiert den Klick-Trigger-Teil der Seite <router-link to="/page1">Page1</router-link>
      <router-link to="/page2">Seite2</router-link>
    </div>
//router-view definiert den angezeigten Teil der Seite <router-view></router-view>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App"
}
</Skript>

<Stil>
#app {
  Schriftfamilie: „Avenir“, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
</Stil>

Auf diese Weise kann unsere Seite Routing-Sprünge und -Umschaltungen durchführen, und die grundlegende Verwendung des Routings ist abgeschlossen. Es besteht jedoch das Problem, dass wir die Routing-Seite beim ersten Aufrufen nicht sehen können. Dies liegt daran, dass wir keinen Standardwert festgelegt haben. Der Pfad ist beim ersten Aufruf leer, daher können wir das Problem folgendermaßen lösen:

router.js

importiere Vue von „vue“;
importiere VueRouter von „vue-router“;
Vue.use(VueRouter)
importiere Seite1 aus „./page1.vue“;
importiere Seite2 aus „./page2.vue“;
Benutzer aus „./user.vue“ importieren

const Routen = [
    {Pfad:'/Seite1',Komponente:Seite1},
    {Pfad:"/Seite2",Komponente:Seite2},
    //Sie können die Umleitung konfigurieren {path:'',redirect:"page1"}
    //Oder schreiben Sie eine Route mit einem leeren Pfad neu {path:"",component:page1}
]

const router = neuer VueRouter({
    Routen
});

Standardrouter exportieren

Beide oben genannten Lösungen können gelöst werden. Die Konfiguration einer Umleitung bedeutet, dass, wenn der entsprechende Pfad leer ist, zu Seite1 umgeleitet wird und die Route von Seite1 ausgeführt wird; oder wir können eine Route neu konfigurieren, und wenn der Pfad leer ist, zeigt die Router-Ansicht die Seite von Seite1 an;

Der Unterschied zwischen der Verwendung der Umleitung und der separaten Konfiguration des Routings:

Umleitung bedeutet eigentlich, die entsprechende Route auszuführen, wenn der übereinstimmende Pfad die Bedingungen erfüllt. Natürlich zeigt die Adresse in der URL zu diesem Zeitpunkt die entsprechende Route an, und die Seite ist auch die entsprechende Routenseite.

Konfigurieren Sie die Route neu, wenn der Pfad den Bedingungen entspricht. Der Teil zur Anzeige der Router-Ansichtsseite ist für die Anzeige der Seite verantwortlich, die die Bedingungen erfüllt. Tatsächlich ändert sich die URL nicht.

Dann gibt es einige komplexe Situationen, die durch einfaches Routing nicht erreicht werden können. Schauen wir weiter nach unten

Dynamische Routenanpassung:

Tatsächlich gibt es in unserem Leben viele solcher Beispiele. Haben Sie sie bemerkt? Beispielsweise erscheint auf einer Website oder in einem Backend-Verwaltungssystem nach der Anmeldung normalerweise eine Eingabeaufforderung wie „Willkommen zurück“ oder „XXX“. Diesen Effekt können wir durch dynamisches Routing erzielen.

Erstellen Sie zunächst eine neue Datei user.vue im Verzeichnis src:

<Vorlage>
    <div>
        <h1>Benutzer</h1>
       //Hier können Sie die Routenparameter über $route.params.name abrufen<p>Willkommen zurück, {{$route.params.name}}</p>
    </div>
</Vorlage>
<Skript>
    Standard exportieren {
        Daten () {
            zurückkehren {
                msg: „Ich bin eine Komponente von Seite 1“
            }
        }
    }
</Skript>

Dann ändern wir den Code der App.vue-Datei:

<Vorlage>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <router-link to="/page1">Seite1</router-link>
      <router-link to="/page2">Seite2</router-link>
    </div>

//Füge zwei Router-Link-Tags hinzu <div>
      <router-link to="/user/xianyu">Dynamisches Routing Xianyu</router-link>
      <router-link to="/user/mengxiang">Dynamischer Routing-Traum</router-link>
    </div>
    <Router-Ansicht></Router-Ansicht>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App"
}
</Skript>

<Stil>
#app {
  Schriftfamilie: „Avenir“, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
</Stil>

Ändern Sie unsere router.js

importiere Vue von „vue“;
importiere VueRouter von „vue-router“;
Vue.use(VueRouter)
importiere Seite1 aus „./page1.vue“;
importiere Seite2 aus „./page2.vue“;
Benutzer aus „./user.vue“ importieren

const Routen = [
    {Pfad:'/Seite1',Komponente:Seite1},
    {Pfad:"/Seite2",Komponente:Seite2},
    // {Pfad:'',Umleitung:"Seite1"}
    {Pfad:"",Komponente:Seite1},
 //Verwenden Sie einen Doppelpunkt. Bei einer Übereinstimmung wird der Parameterwert wie folgt festgelegt: $route.params {path:"/user/:name",component:user}
    
]

const router = neuer VueRouter({
    Routen
});

Standardrouter exportieren

Nach der Konfiguration kann es normal und ohne Unfälle ausgeführt werden. Schauen wir uns die Auswirkungen an:

Die dynamische Routenanpassung bietet uns Komfort und ermöglicht es uns, durch die Konfiguration einer Route den Effekt einer teilweisen Änderung der Seite zu erzielen, wodurch den Benutzern das Gefühl mehrerer Seiten vermittelt wird. Ist das nicht cool? ! !

Das ist zwar cool, bringt aber auch einige Probleme mit sich. Denn wenn wir Routenparameter verwenden und von /user/xianyu nach /user/mengxiang navigieren, wird die ursprüngliche Komponenteninstanz wiederverwendet und beide Routen rendern dieselbe Komponente. Im Vergleich zum Zerstören und Neuerstellen ist die Wiederverwendung der Anzeige effizienter. Das einzige Problem besteht darin, dass die Lebenszyklus-Hook-Funktion nicht mehr aufgerufen wird, d. h. sie wird nicht mehr ausgelöst; aber es gibt immer mehr Lösungen als Probleme, was wir erreichen können, indem wir das $route-Objekt überwachen;

Ändern Sie den Code von user.vue

<Vorlage>
    <div>
        <h1>Benutzer</h1>
        <p>Willkommen zurück,{{msg}}</p>
    </div>
</Vorlage>
<Skript>
    Standard exportieren {
        Daten () {
            zurückkehren {
                // msg: „Ich bin eine Komponente von Seite 1“
                Nachricht:""
            }
        },
        betrachten:{
//to gibt die Komponente an, die Sie gerade betreten, und from gibt an, aus welcher Komponente Sie kommen. $route(to,from){
                diese.msg=zu.params.name; 
                konsole.log(111);
            }
        }
    }
</Skript>

Das Wirkungsdiagramm sieht wie folgt aus:

Wir können deutlich sehen, dass das von uns überwachte $route-Objekt ausgelöst wurde und die Konsole auch Folgendes ausgab:

Werfen wir einen Blick auf das verschachtelte Routing:

Verschachtelte Routen:

Oftmals bestimmt unsere Seitenstruktur, dass wir möglicherweise verschachtelte Routen benötigen. Wenn wir beispielsweise die Homepage aufrufen, gibt es Kategorien. Wenn wir eine der Kategorien auswählen, können wir die entsprechenden Details eingeben. Zu diesem Zeitpunkt können wir verschachtelte Routen verwenden. Das offizielle Dokument stellt uns ein untergeordnetes Attribut zur Verfügung, das ein Array-Typ ist, der tatsächlich eine Gruppe von Routen enthält. Zu diesem Zeitpunkt kommt die Eltern-Kind-Beziehungsstruktur zum Vorschein, sodass die Route im untergeordneten Attribut relativ zur untergeordneten Route der externen Route des untergeordneten Attributs ist.

Ein guter Speicher ist nicht so gut wie ein schlechter Code. Schauen wir uns den Code einmal an:

Erstellen Sie zunächst zwei neue Vue-Dateien in unserem src-Verzeichnis, nämlich phone.vue und computer.vue

Telefon.vue

<Vorlage>
    <div>
        <p>{{msg}}</p>
    </div>
</Vorlage>
<Skript>
    Standard exportieren {
        Daten () {
            zurückkehren {
                msg: „Verschachtelte mobile Komponenten“
            }
        }
    }
</Skript>

computer.vue

<Vorlage>
    <div>
        <p>{{msg}}</p>
    </div>
</Vorlage>
<Skript>
    Standard exportieren {
        Daten () {
            zurückkehren {
                msg: „Verschachtelte Computerkomponenten“
            }
        }
    }
</Skript>

Dann ändern wir unsere App.vue-Datei:

<Vorlage>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <router-link to="/page1">Seite1</router-link>
    </div>
    <Router-Ansicht></Router-Ansicht>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App"
}
</Skript>

<Stil>
#app {
  Schriftfamilie: „Avenir“, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
</Stil>

Aus der obigen App.vue-Datei können wir ersehen, dass unsere Seite derzeit nur ein page1-Tag hat.

Lassen Sie uns router.js ändern

importiere Vue von „vue“;
importiere VueRouter von „vue-router“;
Vue.use(VueRouter)
importiere Seite1 aus „./page1.vue“;
importiere Seite2 aus „./page2.vue“;
Benutzer aus „./user.vue“ importieren;
Telefon aus „./phone.vue“ importieren;
Computer aus „./computer.vue“ importieren

const Routen = [
    {
        Pfad: '/Seite1',
        Komponente:Seite1,
        Kinder: [
            {
                Pfad: "Telefon",
                Komponente: Telefon
            },
            {
                Pfad: "Computer",
                Komponente: Computer
            },
        ]
    },
    // {Pfad:"/Seite2",Komponente:Seite2},
    // // {Pfad:'',Umleitung:"Seite1"}
    // {Pfad:"",Komponente:Seite1},
    // {Pfad:"/Benutzer/:Name",Komponente:Benutzer}
    
]

const router = neuer VueRouter({
    Routen
});

Standardrouter exportieren

Der Intuition halber sind alle anderen Routen auskommentiert und nur /page1 bleibt auf der Seite.

Wie oben erwähnt, ist das untergeordnete Attribut tatsächlich eine Sammlung von Unterrouten, und die Unterrouten werden in der Array-Struktur platziert.

Das Wirkungsdiagramm sieht wie folgt aus:

Es gibt zwei Möglichkeiten der Routennavigation:

Tag-Navigation: Die Tag-Navigation <router-link><router-link> dient zum Springen durch Escapen zu <a></a>-Tags, wobei das „to“-Attribut im Router-Link-Tag zum „href“-Attribut im „a“-Tag escaped wird.

// Springe zur Route mit dem Namen user und übergebe den Parameter userId
<router-link :to="{ name: 'user', params: { userId: 123 }}">Benutzer</router-link>

Programmatische Navigation: Wir können this.$router.push() verwenden, um programmatische Navigation zu implementieren. Natürlich können wir auch Parameterübergabe implementieren. Diese Art der programmatischen Navigation wird im Allgemeinen verwendet, um nach einem Klick auf eine Schaltfläche zu springen.

router.push({ Name: 'Benutzer', Parameter: { Benutzer-ID: 123 }})

Beide navigieren die Route zum Benutzer/123-Pfad

Benannte Routen:

Manchmal ist es bequemer, eine Route anhand eines Namens zu identifizieren. Um es uns leichter zu machen, faul zu sein, hat der Beamte der Route ein Namensattribut hinzugefügt. Nach dem Benennen dieses Attributs entspricht der Zugriff auf dieses Attribut dem direkten Zugriff auf die Route.

Normales Routing:

router.push({ Pfad: '/Benutzer/:Benutzer-ID', Parameter: { Benutzer-ID: 123 }})

Benannte Routen:

router.push({ Name: 'Benutzer', Parameter: { Benutzer-ID: 123 }})

Tatsächlich besteht zwischen beiden kein Unterschied. Sie bieten lediglich zwei Möglichkeiten, auf die Route zuzugreifen, die über den Pfad oder den Alias ​​abgeglichen werden können.

Oben finden Sie den ausführlichen Inhalt der ausführlichen Erklärungsanleitung zum Vue-Routing. Weitere Informationen zum Vue-Routing finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!