Detaillierter Installationsprozess und Prinzip des Vue-Routers

Backend-Routing:

Die URL-Anforderungsadresse entspricht den Ressourcen auf dem Server und je nach Anforderungsadresse werden unterschiedliche Ressourcen zurückgegeben.

Front-End-Routing:

In einer Einzelseitenanwendung ändert sich der angezeigte Inhalt basierend auf vom Benutzer ausgelösten Ereignissen durch Ändern der URL, ohne dass die Seite aktualisiert werden muss.

1. Implementierungsprinzip des Front-End-Routings

URL-Hash-Muster

Beim Ändern des hash -Werts ist # eine Standortkennung, die zu einem Standort innerhalb der Seite springen kann, ohne die Seite zu aktualisieren.

Ändern Sie den Hashwert der Seite über location.hash , zum Beispiel:

Wir haben festgestellt, dass die Seite nicht aktualisiert wird.

URL - history

Im history gibt es 5 Möglichkeiten, die URL zu ändern, ohne die Seite zu aktualisieren, und zwar:

• history.pushState() //Auf den Stapel legen
• history.replaceState() // Ersetzt die aktuelle URL und kann nicht zur vorherigen Seite zurückkehren
• history.back() //Zur vorherigen Seite zurückkehren
• history.go(n) //n kann größer als 0 sein, was eine Anzahl von Schritten vorwärts angibt, und kleiner als 0, was eine Anzahl von Schritten rückwärts angibt
• history.forward() //Ein Schritt vorwärts

history.go(-1) ist gleichwertig mit history.back()

history.go(1) ist gleichwertig mit history.forward()

Die drei wichtigsten Front-End-Frameworks verfügen alle über ein eigenes Routing:

Angular hat ngRouter

React hat ReactRouter

Vue hat vue-Router

2. Grundlegende Verwendung von vue-Router

2.1. Installation

npm installiere vue-router --save

Die Voraussetzung für die Verwendung von vue-router ist, dass Vue verwendet werden muss

Importieren Sie vue-router in index.js im Router-Ordner

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren

Vue.use(VueRouter) //Referenz Vue-Router-Plugin

2.2. Routing konfigurieren

//Konfiguriere die Beziehung zwischen Routing und Komponenten const route=[
  {
      Weg: '/',
    // Beim Zugriff auf '/' wird die Route auf die neue Adresse '/home' umgeleitet.
    Umleitung: '/home',
  },
  {
     Pfad: '/home',
     Komponente: Zuhause,
   },
   {
     Pfad: '/login',
     Komponente: Login,
    },
]
 

2.3. Instanziierung

const router = neuer VueRouter({
  Modus: "Verlauf", //Modusrouten festlegen
});
 

2.4. Montagerouten

Gehen Sie zu main.js , instanziieren Sie Vue und mounten Sie router auf Vue.

let app = neues Vue({
 el:'#app',
  Daten:{},
  // Am Vue-Router einhängen,
})
 

2.5. Router-Link und Router-View zur Seite hinzufügen

<!-- Route hinzufügen -->
<router-link to="/home">Zuhause</router-link>
<router-link to="/about">Über</router-link>

<!-- Routing-Inhalt anzeigen-->
<Router-Ansicht />

Standardmäßig wird router-link als A-Tag gerendert, beispielsweise:

<router-link to="/home">Zuhause</router-link>
// Als <a href="#/home" rel="external nofollow" >Homepage</a> rendern

router-view wird verwendet, um Platz einzunehmen und die Komponenten anzuzeigen, die der Route an diesem Standort entsprechen.

3. Router-Modus

Es gibt zwei Routing-Modi: hash und history .

3.1 Hash-Modus

vue-router verwendet standardmäßig den Hash-Modus.

Der Anker in hash URL ist der Inhalt nach #xx. Indem wir den Anker als Routing-Adresse verwenden, ändern wir normalerweise den Inhalt nach #, damit der Browser die angegebene Komponente rendern kann. Änderungen am Anker lösen onhashchange aus.

3.2 Verlaufsmodus

history ist eine normale URL ohne das #-Zeichen und erfordert bei Verwendung eine Serverkonfiguration. Im Verlaufsmodus sind die entsprechenden Methoden dieselben wie bei den oben genannten 5 Methoden.

Der gewünschte Modus kann im vue-router angegeben werden :

const router = neuer VueRouter({
 Modus: „Verlauf“
})

4. Router-Link-Eigenschaften

Standardmäßig wird router-link in ein A-Tag gerendert, manchmal möchten Sie es aber vielleicht in ein anderes Tag rendern.

4.1. Tag-Attribut

Das Tag-Attribut wird verwendet, um den Rendering-Typ des Router-Link-Tags festzulegen. Wenn wir beispielsweise router-link als button rendern möchten, wie:

<router-link to="/home" tag="button">Zuhause</router-link>

Überprüfen Sie das gerenderte Element und Sie werden feststellen, dass es zu einem button -Tag geworden ist und der entsprechende hinzugefügte Attributwert ungültig wird. Wenn Sie zu diesem Zeitpunkt klicken, gelangen Sie nicht zum entsprechenden Inhalt. Bitte lesen Sie die Sprungmethode unten weiter.

Außer der button kann der Attributwert des Tags auch jedes andere Tag sein, und Router-Link rendert es automatisch in das entsprechende Tag.

4.2. Attribut ersetzen

replace entspricht replaceState im obigen history . Beim Springen bleibt kein history übrig. Wenn replace angegeben ist, können Sie nicht zur vorherigen Seite zurückkehren.

<router-link to="/home" replace>Zuhause</router-link>

4.3, aktive Klasse

active-class setzt den Klassennamen router-link der aktuell beim Anklicken ausgewählt ist. Standardmäßig lautet der Klassenname: router-link-active

<a href="#/" rel="externes Nofollow"  
 aria-current="Seite" 
 Klasse = "Router-Link-exakt-aktiv Router-Link-aktiv">
 Startseite</a>

Um den aktuellen Elementstil festzulegen, müssen Sie ihn auf „ router-link-active。

Legen Sie die aktive Klasse fest, beispielsweise:

<router-link to="/" active-class="active">Zuhause</router-link>
// Der Klassenname router-link-active wird durch active ersetzt

Wenn Sie die globalen router-link -Auswahlklassennamen in benutzerdefinierte ändern müssen, ist es zu viel Arbeit, sie einzeln festzulegen. Sie können sie einheitlich im Router festlegen.

const router = neuer VueRouter({
 Routen,
 Modus: "Hash",
  linkActiveClasses: 'active' //Klassennamen einheitlich festlegen})

5. vue-Rrouter-Seitensprungmethode

5.1. Router-Link-Implementierung

// Einfaches Schreiben von <router-link to="/">Home</router-link>

//Dynamischen Pfad verwenden
<router-link :to="{ Pfad : '/' }"></router-link>
Sie können den Pfad oder den Namen verwenden

// Mit Parameterübergabe zu 1 springen
<Router-Link: zu = "
{ Name:'home', Parameter:{ ID:'123' , Name:'gq' }}
">
</Router-Link>

// Springe mit dem Parameter <router-link :to="
{ Pfad:'/', Abfrage:{ ID:'123' , Name:'gq' }}
">
</Router-Link>
 

5.2. Weiterleitung über js

// Einfach schreiben: this.$router.push({ path:'/' })
// push ist das gleiche wie history.pushState // Sprung mit Parametern this.$router.push({
 Name: 'home', Parameter: {ID:'123', Name:'gq'}
})

//Mit mehreren Parametern this.$router.push({
 Name: "Heimat", 
 Parameter: { ID:'123' , Name:'gq' },
 Abfrage: { plan:'privat' }
})

6. Dynamisches Routing

In manchen Fällen ist der path einer Seite möglicherweise nicht klar, z. B. lautet der erwartete Pfad /user/123 oder /user/456 . Der Wert dahinter ist die Benutzer-ID oder ein anderer Wert.

Konfigurieren von Routen

Router:[
 {
     Pfad: '/user/:id',
   Komponente:()=>{ import('../views/user.vue') }
 }
]
 

Routen hinzufügen

<router-link to="/user/123"> Benutzer:123 </router-link>
<router-link to="/user/456"> Benutzer:456 </router-link>

 
//Den ID-Wert dynamisch festlegen <router-link :to=" '/user/'+id "> user:{{ id }} </router-link>

Holen Sie sich den dynamischen Wert dahinter

dies.$route.params.id 

Die ID hier ist die ID, die in der Konfigurationsroute festgelegt wurde. Achten Sie darauf, dass sie konsistent bleibt.

Methode 2: Verwenden Sie eine Abfrage, um Parameter zu übergeben

<router-link zu="/user?id=123"></router-link>

//Beim Abrufen des Wertes this.$route.query.id

Darüber hinaus können this.$router.addRoutes([]) auch dynamische Routen hinzugefügt werden, die ein Array übergeben, genau wie routes .

7. Lazy Loading von Routen

Lazy Loading bedeutet Laden, wenn es verwendet wird, und Nichtladen, wenn es nicht verwendet wird.

Beim Verpacken und Erstellen einer Anwendung wird das JS-Paket sehr groß, was sich auf die Ladegeschwindigkeit auswirkt. Wenn wir die Komponenten, die verschiedenen Routen entsprechen, in verschiedene Codeblöcke aufteilen und dann beim Zugriff auf die Route die entsprechenden Komponenten laden können, ist dies effizienter.

Was genau bewirkt das Lazy Loading von Routen? Die Hauptfunktion besteht darin, die der Route entsprechenden Komponenten in einen JS-Codeblock zu packen und das entsprechende JS nur zu laden, wenn auf die Route zugegriffen wird.

//Direkter Verweis auf „import Home“ von „./component/home“
const Routen = [
 {
  Pfad: „/home“,
  Komponente:Home
 }
]

//Verzögertes Laden const routes = [
 {
  Pfad: „/home“,
  Komponente:()=>{ import('./Komponente/home') }
 }
]

8. Verschachtelte Routen

In praktischen Anwendungen besteht es normalerweise aus mehreren Schichten verschachtelter Komponenten.

Implementierungsschritte:

Erstens: Erstellen Sie die entsprechende Unterkomponente und konfigurieren Sie die entsprechende Unterroute in der Routenzuordnung.

Zweitens: Verwenden Sie router-view Tag innerhalb der Komponente

{
 Pfad: "/body",
 Komponente: ()=> import( "../components/bodyLayout.vue"),,
 Kinder:[
  {
   Pfad: "Manager",
   Komponente: ()=> import( "../components/blankView.vue"),
   Kinder:[
    {
      Pfad: "Benutzer",
      Komponente: ()=> import( "../views/manager/user.vue")
     },
    ]
   },
  ]
}

Beim Zugriff auf die user lautet die Route ：/body/manager/user

Hinweis: Fügen Sie beim Festlegen des Pfads für verschachtelte Routen kein "/" hinzu, da sich sonst die Route ändert.

{
 Pfad: "/user",
 Komponente: ()=> import( "../views/manager/user.vue")
}
//An dieser Stelle wird der Zugriffspfad zu "/user"
 

9. Unterschied zwischen Router und Route

Versuchen Sie, router in main.js auszudrucken und this.$router in einer beliebigen Komponente auszudrucken. Das Druckergebnis ist wie unten dargestellt:

Wir stellten fest, dass die beiden Ergebnisse genau gleich waren. Daher fällt es uns nicht schwer, die folgende Bedeutung zu verstehen.

router ist eine VueRouter -Instanz mit eigenen Methoden. Wenn Sie beispielsweise mit der mit new VueRouter erstellten Instanz zu einer anderen URL navigieren möchten, können Sie router.push verwenden, das in der Methode jump beschrieben wird.

Route ist das aktuell aktive Routenobjekt, das die aktuellen Routeninformationen enthält. Über dieses Objekt können query path , Parameter, params , name , matched und hash

10. Routing-Wächter

Warum Navigationswächter verwenden? Betrachten wir eine Anforderung: Wie ändert sich in einer SPA-Anwendung der Webseitentitel, wenn die Seite wechselt?

// Füge created(){ in der entsprechenden Komponente hinzu
 document.title="Test"
}

Beim Aufrufen dieser Komponente wechselt der Titel automatisch zu „Test“

Wenn wir die obige Methode verwenden, müssen wir so viele Komponenten hinzufügen, wie wir entwickelt haben, was zu mühsam ist. Daher müssen wir Routing Guards verwenden, um einheitliche Änderungen vorzunehmen und die Wartung zu erleichtern.

10.1 Globale Wache

1>, Verwenden Sie router.beforeEach , um einen globalen Front Guard zu registrieren, der bei jeder Routenänderung übergeben wird. Der von beforeEach empfangene Parameter ist eine Funktion, die drei Parameter enthält.

router.beforeEach((bis,von,weiter)=>{
//Route von von nach nach 
// Wir müssen der Route nur ein Namensattribut hinzufügen document.title = from.name
 nächste()
})

Hinweis: Die Reihenfolge der oben genannten drei Parameter kann nicht geändert werden. next darf nicht fehlen, es muss hinzugefügt werden, sonst kann die Seite nicht zum nächsten Schritt springen und bleibt im leeren Bereich hängen.

2>, Verwenden Sie router.afterEach , um einen globalen After-Guard zu registrieren.

router.afterEach((bis,von)=>{
 console.log('Rückenschutz')
})

Beide Guards sind globale Guards. afterEach wird ausgeführt, nachdem der Routensprung abgeschlossen ist, daher wird next nicht benötigt. Es gibt nur zwei Parameter.

10.2. Exklusiver Routerschutz

Die direkt in der Routenkonfiguration definierten Guards werden auf die gleiche Art und Weise verwendet wie globale Guards, mit dem Unterschied, dass sie in einem der Routenobjekte platziert werden und nur unter dieser Route funktionieren.

{
 Pfad: "/test",
 Name: "Test",
 Komponente: ()=> import( "../views/manager/test.vue"),
 vorEingabe:(bis,von,weiter)=>{
  console.log('bevor der Test beginnt')
  nächste()
 }
}

Diese Guards haben die gleichen Methodenargumente wie die globalen vorhergehenden Guards.

10.3. Schutzvorrichtungen innerhalb von Komponenten

Sie können Routennavigationsschutzmechanismen direkt in der Routenkomponente definieren. Die in der Komponente definierten Schutzmechanismen sind Komponentenschutzmechanismen.

const Foo = {
  Vorlage: `...`,
  vorRouteEnter(nach, von, weiter) {
    // Wird aufgerufen, bevor die entsprechende Route, die diese Komponente rendert, bestätigt wird. // Nein! fähig! Holen Sie sich die Komponenteninstanz `this`
    // Da die Komponenteninstanz nicht erstellt wurde, bevor der Guard ausgeführt wird},
  vorRouteUpdate(nach, von, weiter) {
    // Wird aufgerufen, wenn sich die aktuelle Route ändert, die Komponente aber wiederverwendet wird // Beispielsweise für einen Pfad /foo/:id mit dynamischen Parametern, wenn zwischen /foo/1 und /foo/2 gesprungen wird,
    // Da dieselbe Foo-Komponente gerendert wird, wird die Komponenteninstanz wiederverwendet. Und dieser Hook wird in diesem Fall aufgerufen.
    // Sie können auf die Komponenteninstanz `this` zugreifen
  },
  vorRouteAbfahren(nach, von, weiter) {
    // Wird aufgerufen, wenn von der entsprechenden Route dieser Komponente weg navigiert wird // Sie können auf die Komponenteninstanz `this` zugreifen
  }
}

Hinweis: beforeRouteLeave wird beim Verlassen der Route ausgeführt und next muss hinzugefügt werden, sonst erfolgt kein normaler Sprung zur nächsten Route.

11. am Leben bleiben

Beim Routenwechsel wird die Seite jedes Mal neu gerendert. Einige unserer Komponenten enthalten Daten, die beibehalten werden müssen. Wir möchten nicht jedes Mal neu rendern, wenn wir hin- und herwechseln, also verwenden wir keep-alive um die Komponente zu umschließen, sodass created mounted und anderen Hook-Funktionen nur beim ersten Laden ausgeführt werden.

keep-alive ist eine integrierte Komponente von Vue , die es den enthaltenen Komponenten ermöglicht, ihren Status beizubehalten oder ein erneutes Rendern zu vermeiden.

<div id="app">
 <router-link to="/home">Zuhause</router-link>
 <router-link to="/login">Anmelden</router-link>
 <am Leben erhalten>
  <Router-Ansicht></Router-Ansicht>
 </am Leben erhalten>
</div>

Fügen Sie eine keep-alive -Komponente hinzu. Beim Umschalten wird die Komponente nur beim ersten Mal gerendert und danach nicht erneut gerendert.

11.1. Keep-Alive-spezifische Methoden

aktiviert(){
 console.log('aktiviert')
},
deaktiviert(){
 console.log("deaktiviert")
}

Diese beiden Funktionen werden nur ausgeführt, wenn die Komponente im Status gehalten wird und keep-alive verwendet wird.

Ausführungsreihenfolge des Keep-Alive-Lebenszyklus:

created -> mounted -> activated

deactivated wird erst nach dem Verlassen ausgelöst

11.2. Keep-Alive-Attribut

Keep-Alive hat zwei sehr wichtige Eigenschaften:

include - Zeichenfolge oder regulärer Ausdruck, nur übereinstimmende Komponenten werden zwischengespeichert

exclude - eine Zeichenfolge oder ein regulärer Ausdruck, alle Komponenten, die damit übereinstimmen, werden nicht zwischengespeichert

<keep-alive include="test">
 <Router-Ansicht></Router-Ansicht>
</am Leben erhalten>

//Testkomponente fügt Namensattribut hinzu <template>
  <div>
    prüfen
  </div>
</Vorlage>
<Skript>
 Standard exportieren {
  Name: "Test"
 }
<Skript>

Zu diesem Zeitpunkt wird nur test zwischengespeichert, keine anderen Komponenten.

Wenn andere Komponenten gleichzeitig zwischengespeichert werden müssen, kann include mehrere durch Kommas getrennte Werte hinzufügen, jedoch ohne Leerzeichen.

<keep-alive include="test,benutzer">
 <Router-Ansicht></Router-Ansicht>
</am Leben erhalten>
 

Verwendung von „exclude“:

<keep-alive exclude="test,benutzer">
 <Router-Ansicht></Router-Ansicht>
</am Leben erhalten>

Genau das Gegenteil vom vorherigen Beispiel. Nur test und user werden nicht zwischengespeichert, während die anderen zwischengespeichert werden.

Dies ist das Ende dieses Artikels über den detaillierten Prozess des Installationsprinzips von vue-Router. Weitere relevante Inhalte zu vue-Router finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!