Detaillierte Erläuterung des Vue-Routing-Routers

Routing-Plugins modular nutzen

(1) Installation

npm installiere Vue-Router

(2) Erstellen Sie ein Dateiverzeichnis

Erstellen Sie einen Router-Ordner im src-Verzeichnis und erstellen Sie dann eine index.js

(3) Hier erstellen wir Routen modular, um die Codeverwaltung zu erleichtern. Hier registrieren wir nur das Routen-Plugin und erstellen dann das Routenobjekt. Das erstellte Routingobjekt wird über das Schlüsselwort „export default“ verfügbar gemacht.

//index.js
VueRouter von „vue-router“ importieren
Vue von „vue“ importieren
Home aus "../views/Home" importieren;
Vue.use(VueRouter) //Routing-Plugin registrieren export default new VueRouter({
    Routen:[{
        Weg:'/',
        Komponente:Home
    }]
})

(4) Importieren Sie das erstellte Routing-Objekt in die Eintragsdatei main.js und mounten Sie es in die Vue-Instanz.

//main.js
Vue von „vue“ importieren
App aus „./App.vue“ importieren
Store aus „@/store“ importieren
importiere Router von '@/router' //Hier stellen wir das von uns erstellte Routing-Objekt vor. Modulare Programmierung Vue.config.productionTip = false
Vue.prototype.bus = neues Vue()
neuer Vue({
  speichern,
  Router,
  rendern: h => h(App),
}).$mount('#app')

Routen verwenden

Deklarative Navigation

Es ist verständlich, dass das Springen durch Etiketten

Deklarative Navigation: <router-link :to="..."> oder <router-link to="...">

Definieren von Routingregeln

 {
        Weg:'/',
        Komponente:Home
        Name:Startseite
    }

(1) Das to-Attribut des Router-Link-Navigations-Tags verwendet eine Zeichenfolge

 <router-link to="/">Gehe zur Startseite</router-link>

(2) So können Sie über das Router-Link-Navigations-Tag Einspruch erheben

Abgleich über Pfade

 <router-link :to="{path:'/'}">gehe nach Hause</router-link>

Das Router-Link-Navigationstag zum Attribut verwendet ein Objekt und stimmt mit dem Routennamen überein

 <router-link :to="{name:'home'}">nach Hause gehen</router-link>

Programmatische Navigation

Es kann als JS-Sprung verstanden werden

Programmatische Navigation: router.push(...)

Das folgende Beispiel enthält Informationen zur dynamischen Routenanpassung und zu Abfrageparametern. Wenn Sie sich nicht sicher sind, können Sie zuerst den Inhalt dieser beiden lesen und dann zurückkommen, um den Inhalt hier zu lesen.

// Zeichenfolge router.push('home')
// Objekt router.push({ Pfad: 'home' })
// Benannte Routen router.push({ name: 'user', params: { userId: '123' }})
// Mit Abfrageparametern wird es zu /register?plan=private
router.push({ Pfad: 'registrieren', Abfrage: { Plan: 'privat' }})

Hinweis : Wenn ein Pfad angegeben ist, werden Parameter ignoriert, was bei der Abfrage im obigen Beispiel nicht der Fall ist. Stattdessen müssen Sie den Routennamen und die Parameter angeben oder den vollständigen Pfad mit Parametern manuell schreiben:

Konstante Benutzer-ID = "123"
router.push({ Name: 'Benutzer', Parameter: { Benutzer-ID }}) // -> /Benutzer/123
router.push({ Pfad: `/Benutzer/${Benutzer-ID}` }) // -> /Benutzer/123
// Die Parameter hier sind nicht wirksam router.push({ path: '/user', params: { userId }}) // -> /user

Dynamische Routenanpassung

Definieren von Routingregeln

 {
        Pfad:'/Benutzer/:id',
        Komponente:Benutzer
        Name:Benutzer
    }

 <router-link to="/user/01">Gehe zur Startseite</router-link>

 <router-link :to="{path:'/user/01'}">gehe nach Hause</router-link>

 <router-link :to="{name:'/user',params={id:'01'}}">gehe nach Hause</router-link>

Indem Sie es wie oben definieren, können Sie die dynamischen Routenparameter über $route.params.id abrufen: der ID-Wert ist „01“

Beachten:

Wenn Sie zum Abgleichen die Objektmethode verwenden, können Pfad und Parameter nicht verwendet werden. Nur nach Name und Parametern

Die folgende Methode kann nicht mit der Routing-Regel {path:'/user/:id'} übereinstimmen. Der folgende Ausdruck kann nur als '/user' verstanden werden.

Auch wenn die Route mit dem Platzhalterzeichen * übereinstimmt, werden keine Parameter übergeben, da das Parameterattribut nicht analysiert wird, wenn das Pfadattribut vorhanden ist.

{
  // Stimmt mit allen Pfaden überein. Pfad: '*'
}
{
  // Stimmt mit jedem Pfad überein, der mit „/user-“ beginnt. Pfad: „/user-*“
}

Platzhalter-Übereinstimmungspfad

Normalerweise verwenden wir *, um andere unerwartete Pfade zu erfassen und sie als Fallback zu behandeln, wobei wir sie normalerweise zu einer 404-Fehlerseite navigieren.

<router-link to="/Benutzer?name=zhangsan">...</router-link>
<router-link :to="{path:'/user?zhangsan'}">...</router-link>
<router-link :to="{Pfad:'/Benutzer',Abfrage:{Name:'zhangsan'}}">...</router-link>
<router-link :to="{name:'Benutzer',query:{name:'zhangsan'}}">...</router-link>

Wenn ein Platzhalter verwendet wird, wird $route.params automatisch ein Parameter namens „pathMatch“ hinzugefügt. Es enthält den Teil der URL, der mit dem Platzhalter übereinstimmt.

Abfrageparameter

<router-link to="/Benutzer?name=zhangsan">...</router-link>
<router-link :to="{path:'/user?zhangsan'}">...</router-link>
<router-link :to="{Pfad:'/Benutzer',Abfrage:{Name:'zhangsan'}}">...</router-link>
<router-link :to="{name:'Benutzer',query:{name:'zhangsan'}}">...</router-link>

Abfrageparameter sind nicht wie dynamische Routenparameterübereinstimmung. Auch wenn ein Pfad verwendet wird, kann die Abfrage weiterhin zum Übergeben von Parametern verwendet werden.

Die von der obigen Abfrage übergebenen Parameter können über this.$route.query.name abgerufen werden.

Reagieren auf Änderungen der Routing-Parameter

Wenn die Route von /user/01 nach /user/02 verläuft, wird die ursprüngliche Komponenteninstanz wiederverwendet. Da beide Routen dieselbe Komponente rendern, bedeutet dies, dass die Lebenszyklus-Hooks der Komponente nicht erneut aufgerufen werden. Daher ist es notwendig, auf Änderungen der Überwachungsparameter anders zu reagieren.

(1) Überwachung durch Uhr

const Benutzer = {
  Vorlage: '...',
  betrachten:
    $route(nach, von) {
      // Auf Routenänderungen reagieren...
    }
  }
}

(2) Überwachung durch Schiffswächter

const Benutzer = {
  Vorlage: '...',
  vorRouteUpdate(nach, von, weiter) {
    // auf Routenänderungen reagieren...
    // vergessen Sie nicht, next() aufzurufen
  }
}

Benannte Routen, Routen-Aliase und Weiterleitungen

Um die Unterschiede zwischen diesen drei Konzepten besser herauszustellen, habe ich sie im Folgenden näher erläutert. Diese Inhalte werden in den Routingregeln konfiguriert .

{
        Pfad: '/SeiteEins',
        Komponente:PageOne,
        Alias:"/ersteSeite",
        Name:"SeiteEins",
        Umleitung: {Name: 'SeiteZwei'}
    },
    {
        Pfad: '/SeiteZwei',
        Komponente:SeiteZwei,
        Name:'SeiteZwei'
    }

(1) Benennung der Route: Dies kann verstanden werden als die Benennung dieser Route

Auch wenn Sie der Route über das Attribut name einen Namen geben

Routen: [
    {
      Pfad: '/user/:userId',
      Name: "Benutzer",
      Komponente: Benutzer
    }
  ]

(2) Routenalias: Dies kann als der zweite Name dieser Route verstanden werden.

Beispielsweise ist der Alias ​​von /a /b. Wenn ein Benutzer /b besucht, bleibt die URL /b, aber der von der Route gefundene Inhalt ist /a. Das heißt, der Wissens-URL-Inhalt zeigt, dass der Inhalt von /b tatsächlich /a ist.

Hinweis: Der Alias ​​sollte hier als Pfad ausgedrückt werden, anstatt den Namen direkt zu schreiben, wie bei benannten Routen~

const router = neuer VueRouter({
  Routen: [
    { Pfad: '/a', Komponente: A, Alias: '/b' }
  ]
})

(3) Umleitung: Dies kann so verstanden werden, dass beim Zugriff auf /a direkt zu /b gesprungen wird

Es gibt drei Formen von Umleitungsanweisungen:

• Zeichenfolge

const router = neuer VueRouter({
  Routen: [
    { Pfad: '/a', Umleitung: '/b' }
  ]
})

• Objekt

const router = neuer VueRouter({
  Routen: [
    { Pfad: '/a', Umleitung: { Name: 'foo' }}
  ]
})

• Verfahren

const router = neuer VueRouter({
  Routen: [
    { Pfad: '/a', Umleitung: zu => {
      // Methode erhält die Zielroute als Parameter // gibt den umgeleiteten String-Pfad/Pfadobjekt zurück }}
  ]
})

Verschachtelte Routen

Verschachteltes Routing kann folgendermaßen verstanden werden. Die von den abgeglichenen Routen gerenderten Komponenten enthalten Routing-Komponenten. Wenn wir eine Route abgleichen, rendert „/user“ eine Komponente „User“, aber wenn wir mit dem Abgleichen fortfahren möchten, in der <router-view ></router-view> der Komponente „User“. Dann müssen wir eine weitere Übereinstimmung nach /user/childRouteName herstellen. „childRouteName“ ist der Wert des entsprechenden Pfads in unseren untergeordneten Routing-Regeln.

 {
      Pfad: '/user',
      Komponente: Benutzer,
      Kinder: [
        {
          // Wenn /user//profile erfolgreich übereinstimmt,
          // UserProfile wird im <router-view>-Pfad des Benutzers gerendert: 'profile',
          Komponente: UserProfile
        },
        {
          // Wenn /user//posts erfolgreich übereinstimmt // werden UserPosts im <router-view>-Pfad des Benutzers gerendert: 'posts',
          Komponente: UserPosts
        }
      ]
    }

APP.Vue

<div id="app">
  <Router-Ansicht></Router-Ansicht>
</div>

In der Benutzerkomponente

const Benutzer = {
  Vorlage: `
    <div Klasse="Benutzer">
      <span>Benutzerkomponente</span>
      <Router-Ansicht></Router-Ansicht>
    </div>
  `
}

Beachten:

Wenn verschachtelte Routen definiert werden, das heißt, wenn untergeordnete Routen definiert werden, muss die Route vollständig sein, um eine korrekte Übereinstimmung zu gewährleisten. Das heißt, wenn die Zuordnung für /user/profile erfolgreich ist, wird die Zuordnung für /user nicht erfolgreich sein.

Benannte Ansichten

Wenn Sie mehrere Ansichten einer Komponente gleichzeitig rendern, achten Sie darauf, dass mehrere Ansichten auf derselben Ebene angezeigt werden und nicht verschachtelt werden. Sie können dieses Problem derzeit lösen, indem Sie der Ansicht einen Namen geben.
Routing-Regeldefinition

{
        Pfad:"/Benennungsroute",
        Komponenten:{//Beachten Sie, dass Komponenten mit „s“ enden, was bei alleiniger Verwendung nicht der Fall war.
            Standard: Home,
            eins:SeiteEins,
            zwei:SeiteZwei
        }
    }

Komponentendefinition

 	<router-view></router-view>//Rendert die Komponente, die der Standardeinstellung entspricht<router-view name="one"></router-view>//Rendert die Komponente, die eins entspricht<router-view name="two"></router-view>//Rendert die Komponente, die zwei entspricht

Wenn die URL :/namingRoute lautet und die Route übereinstimmt, wird sie entsprechend der entsprechenden Router-Ansichtskomponente gerendert.

Navigationswächter

(1) Globale Wache

Es kann als ein durch das globale Router-Instanzobjekt Router definierter Schutz verstanden werden.

• route.beforeEach (global vor Guard)

Anwendung:

vorJedem((bis,von,nächstes)=>{
	//...
})

• router.beforeResolve (globaler Auflösungsschutz)

Nachdem alle Guards in Komponenten und asynchronen Routenkomponenten aufgelöst wurden, wird der Resolve Guard aufgerufen

Anwendung:

router.beforeResolve((zu, von, weiter) => {
  // ...
})

• router.afterEach (globaler After-Hook)

Der Hook akzeptiert keine Weiter-Funktion und ändert die Navigation selbst nicht:

Anwendung:

router.afterEach((bis, von) => {
  // ...
})

Verwendeter Speicherort: normalerweise index.js im Router-Ordner
const router = neuer VueRouter({ ... })
//Globaler Frontguard router.beforeEach((to, from, next) => {
  // ...
})
//Globaler Auflösungsschutz router.beforeResolve((to, from, next) => {
  // ...
})
//Globaler Post-Hook router.afterEach((to, from) => {
  // ...
})

(2) Exklusiver Routerschutz

Es kann als ein in den Routing-Regeln definierter Schutz verstanden werden

• vorEintreten

(3) Schutzmaßnahmen innerhalb von Komponenten

Es kann als ein in der Komponente definierter Schutz verstanden werden

• vorRouteEnter
  

Die Komponenteninstanz wurde noch nicht erstellt. Wird aufgerufen, bevor die Route bestätigt wird.

const Benutzer = {
  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`
    // Weil die Komponenteninstanz nicht erstellt wurde, bevor der Guard ausgeführt wird}
}

Beachten:

Der Wächter kann dies nicht direkt verwenden, um auf das Vue-Instanzobjekt zuzugreifen, da die Komponenteninstanz noch nicht erstellt wurde. Sie können jedoch einen Rückruf an die nächste Methode übergeben, um die Komponenteninstanz zu lokalisieren.

Die Übergabe eines Rückrufs an next() ist nur gültig, wenn sie in beforeRouteEnter verwendet wird! ! !

beforeRouteEnter (nach, von, weiter) {
  weiter(vm => {
    // Zugriff auf die Komponenteninstanz über `vm`})
}

• beforeRouteUpdate (neu in 2.2)
  

Wird aufgerufen, wenn sich die Route ändert und die Komponente verwendet wird

const Benutzer = {
  Vorlage: `...`,
  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
  }
}

• vorRouteVerlassen
  

Wird aufgerufen, wenn die Navigation die Route verlässt, die dieser Komponente entspricht

const Benutzer = {
  Vorlage: `...`,
  vorRouteAbfahren(nach, von, weiter) {
    // Wird aufgerufen, wenn von der entsprechenden Route dieser Komponente weg navigiert wird // Sie können auf die Komponenteninstanz `this` zugreifen
  }
}

Navigationsanalyseprozess

Normale Ausführungsreihenfolge für erste Zugriffsrouten

• vor jedem globalen Routing-Frontguard
• beforeEnter exklusiver Routenwächter
• beforeRouteEnter-Komponenten-Routing-Schutz
• beforeResolve globaler Routing-Auflösungsschutz
• nach jedem globalen Routing-Post-Hook
• Dom-Rendering
• Ruft die Rückruffunktion auf, die im Routing Guard der Komponente „beforeRouteEnter“ an „next“ übergeben wurde. Und übergeben Sie die erstellte Komponenteninstanz als Parameter der Rückruffunktion.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!