Ein super detailliertes Vue-Router Schritt-für-Schritt-Tutorial

Ich habe kürzlich die gesamte Vue-Familie überprüft. Ich habe das Gefühl, dass ich mich nach dem erneuten Lesen besser daran erinnere, deshalb habe ich eine spezielle Aufzeichnung davon erstellt (die Vue-Router-Version in diesem Artikel ist v3.x).

1. Router-Ansicht

<router-view> ist eine Funktionskomponente, die zum Rendern von Ansichtskomponenten verwendet wird, die dem Pfad entsprechen. Kann mit <transition> und <keep-alive> verwendet werden. Wenn Sie beides zusammen verwenden, achten Sie darauf, <keep-alive> darin zu verwenden.

<Router-Ansicht></Router-Ansicht>
<!--ODER-->
<router-view name="footer"></router-view>

Wenn für <Router-View> ein Name festgelegt ist, wird die entsprechende Komponente unter Komponenten in der entsprechenden Routing-Konfiguration gerendert.

2. Router-Verbindung

Das Tag <router-link> unterstützt die Benutzernavigation (Klick) in Anwendungen mit Routing-Funktionen.

<router-link :to="{ path: '/login'}" replace tag="span"></router-link>

3. Weiterleitung

Die Root-Route leitet zum Login weiter

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

Umleitungsziel dynamisch zurückgeben

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

4. Routing-Alias

Wenn die Route auf /b zugreift, bleibt die URL /b, aber die Routenübereinstimmung ist /a

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

5. Fräsen von Stützen

Verwenden Sie Props, um eine Überkopplung mit $route zu vermeiden, sodass Sie Props verwenden können, um Parameter direkt in der Komponente zu empfangen

5.1, Boolescher Modus

Schreiben Sie die Parameter nach der Route und setzen Sie die Eigenschaften auf „true“.

{
 Pfad: '/vuex/:id',
 Name: 'Vuex',
 Komponente: () => import('@/view/vuex'),
 Requisiten: wahr,
 Kumpel:
  Titel: „vuex“
 }
}

Legen Sie die Parameter fest, die an den Sprung übergeben werden müssen

<router-link :to="{name:'Vuex', params: {id: '99999'}}" tag="h1">Springen</router-link>
<!--ODER-->
zumNächsten() {
    dies.$router.push({
     Name: 'Vuex',
     Parameter: {
      ID: "99999"
     }
    })
}

Auf der Seite, zu der Sie springen, verwenden Sie props oder this.$params, um Parameter abzurufen

Requisiten: {
 Ausweis: {
  Typ: Zeichenfolge,
  Standard: ''
 }
}
<!--ODER-->
dies.$params.id

5.2 Objektmodus

Setzen Sie Requisiten als Objekt in der Route, um statische Daten zu übertragen

{
 Pfad: '/vuex',
 Name: 'Vuex',
 Komponente: () => import('@/view/vuex'),
 Requisiten: {
  ID: "99999"
 },
 Kumpel:
  Titel: „vuex“
 }
}

Springen

<router-link :to="{name:'Vuex'}" tag="h1">Springen</router-link>
<!--ODER-->
zumNächsten() {
 dies.$router.push({
  Name: „Vuex“
 })
}

Auf der Seite, zu der Sie springen, verwenden Sie props oder this.$params, um Parameter abzurufen

Requisiten: {
 Ausweis: {
  Typ: Zeichenfolge,
  Standard: ''
 }
}
<!--ODER-->
dies.$params.id

Hinweis: Gilt nur für statische Daten

5.3, Funktionsmodus

Setzen Sie zunächst die Eigenschaften auf Funktion in der Route und geben Sie ein Objekt zurück. Unabhängig davon, ob es sich um eine Abfrage oder Parameter handelt, kann es in Eigenschaften umgewandelt werden.

{
 Pfad: '/vuex',
 Name: 'Vuex',
 Komponente: () => import('@/view/vuex'),
 Requisiten: Route => ({
     <!--Abfrage-->
  ID: route.query.id,
  <!--params-->
  Alter: route.params.age
 }),
 Kumpel:
  Titel: „vuex“
 }
}

Springen

<router-link :to="{name:'Vuex',query: {id: '99999'}, params:{age:'20'}}" tag="h1">Springen</router-link>
<!--ODER-->
zumNächsten() {
 dies.$router.push({
  Name: 'Vuex',
  Abfrage: {
   ID: "999999"
  },
  Parameter: {
   Alter: '20'
  }
 })
}

Auf der Seite, zu der Sie springen, erhalten Sie die Parameter über Props oder this.$route.params / this.$route.query

Requisiten: {
 Ausweis: {
  Typ: Zeichenfolge,
  Standard: ''
 },
 Alter: {
  Typ: Zeichenfolge,
  Standard: ''
 }
}
<!--ODER-->
dies.$route.query
dies.$route.params

6. Routing-Wächter

Streckenwächter werden vor allem dazu eingesetzt, die Schifffahrt durch Umleitungen oder Aufhebungen zu sichern.

6.1, Globaler Vorschutz vor jedem

Wenn eine Navigation ausgelöst wird, werden globale „Before Guards“ in der Reihenfolge aufgerufen, in der sie erstellt wurden. Guards werden asynchron analysiert und ausgeführt, und die Navigation wartet, bis alle Guards analysiert sind.

Die Verwendung von next ist wie folgt

const router = neuer VueRouter({ ... })

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

6.2, Global Resolution Guard vor der Auflösung

Neu in 2.5.0, ähnlich wie beforeEach, außer dass der Parsing-Guard aufgerufen wird, bevor die Navigation bestätigt wird und nachdem alle Guards in der Komponente und den asynchronen Routing-Komponenten analysiert wurden.

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

6.3, Globaler Post-Hook nach jedem

Der Postwächter nimmt die nächste Funktion nicht entgegen und nimmt auch keine Änderungen an der Navigation selbst vor.

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

6.4, Router-Exklusivschutz vor dem Eintreten

Sie können Ihren eigenen BeforeEnter-Guard direkt in der Routenkonfiguration definieren, mit denselben Methodenparametern wie der globale Before-Guard.

const router = neuer VueRouter({
  Routen: [
    {
      Pfad: '/foo',
      Komponente: Foo,
      beforeEnter: (bis, von, weiter) => {
        // ...
      }
    }
  ]
})

6.5, Schutzvorrichtungen innerhalb von Komponenten

• vorRouteEnter
  

Der Wächter kann hierauf nicht zugreifen, da der Wächter vor der Bestätigung der Navigation aufgerufen wird und die neue Komponente, die gleich erscheinen wird, daher noch nicht erstellt wurde. Sie können auf die Komponenteninstanz zugreifen, indem Sie einen Rückruf an „next“ übergeben. Der Rückruf wird ausgeführt, wenn die Navigation bestätigt wird, und die Komponenteninstanz wird als Parameter der Rückrufmethode verwendet.

const Fußzeile = {
  Vorlage: `...`,
  vorRouteEnter(nach, von, weiter) {
    weiter(vm => {
        // Zugriff auf die Komponenteninstanz über `vm`})
  }
}

• beforeRouteUpdate (neu in 2.2)
  

Wird aufgerufen, wenn sich die aktuelle Route ändert, die Komponente aber wiederverwendet wird. Sie können auf die Komponenteninstanz this zugreifen.

const Foo = {
  Vorlage: `...`,
  vorRouteUpdate(nach, von, weiter) {
    dieser.name = zu.params.name
    nächste()
  }
}

• vorRouteVerlassen
  

Wird aufgerufen, wenn von der entsprechenden Route dieser Komponente weg navigiert wird. Normalerweise wird es verwendet, um zu verhindern, dass Benutzer die Komponente plötzlich verlassen, bevor sie die Änderungen gespeichert haben. Kann durch Aufruf von next(false) abgebrochen werden.

const Foo = {
  Vorlage: `...`,
  vorRouteAbfahren(nach, von, weiter) {
    const answer = window.confirm('Sind Sie sicher, dass Sie gehen möchten?')
    wenn (Antwort) {
        nächste()
    } anders {
        weiter(falsch)
    }
  }
}

6.6, Vollständiger Navigationsanalyseprozess

1. Die Navigation wird ausgelöst.
2. Rufen Sie den beforeRouteLeave-Schutz in der deaktivierten Komponente auf.
3. Ruft den globalen beforeEach-Schutz auf.
4. Rufen Sie „beforeRouteUpdate“-Schutz in wiederverwendeten Komponenten auf (2.2+).
5. Rufen Sie beforeEnter in der Routing-Konfiguration auf.
6. Asynchrone Routingkomponenten auflösen.
7. Rufen Sie beforeRouteEnter in der aktivierten Komponente auf.
8. Ruft den globalen beforeResolve-Schutz auf (2.5+).
9. Navigation bestätigt.
10. Rufen Sie den globalen afterEach-Hook auf.
11. Löst ein DOM-Update aus.
12. Rufen Sie die Rückruffunktion auf, die im beforeRouteEnter-Schutz an next übergeben wurde, und die erstellte Komponenteninstanz wird als Parameter der Rückruffunktion übergeben.
    

7. Routing-Metainformationen

Beim Definieren von Routen können Sie das Metaobjektfeld so konfigurieren, dass zu jeder Route entsprechende Informationen gespeichert werden. Greifen Sie über this.$route.meta oder über to.meta und from.meta in Route Guards darauf zu.

const router = neuer VueRouter({
  Routen: [
    {
  Pfad: '/index',
  Name: 'Index',
  Komponente: () => import('@/view/index'),
  Meta: {
   Titel: 'Homepage',
   rolu: ['Administrator', 'Chef']
  }
 }
  ]
})

8. Übergangseffekte

Umschließen Sie einfach das Router-View-Tag mit dem Transition-Tag. Sie können den Animationseffekt selbst definieren. Weitere Informationen finden Sie unter Verwendung der Transition-Komponente. Sie können watch auch in der übergeordneten Komponente oder in app.js verwenden, um auf $route-Änderungen zu achten, das Namensattribut der Übergangskomponente entsprechend unterschiedlicher Routen zu ersetzen und unterschiedliche Animationseffekte zu erzielen.

<Übergang:name="Übergangsname">
  <Router-Ansicht></Router-Ansicht>
</Übergang>

Monitor

betrachten:
  '$route' (nach, von) {
    const toD = to.path.split('/').Länge
    const fromD = from.path.split('/').length
    this.transitionName = zuD < vonD ? 'nach rechts schieben' : 'nach links schieben'
  }
}

9. Scrollverhalten

Wenn Sie eine Routerinstanz erstellen, können Sie eine scrollBehavior-Methode angeben und Routenobjekte empfangen und empfangen. Der dritte Parameter, savedPosition, ist nur verfügbar, wenn er durch die Vorwärts-/Zurück-Schaltflächen des Browsers ausgelöst wird.

const router = neuer VueRouter({
 Modus: "Hash",
 Routen,
 scrollVerhalten(bis, von, gespeichertePosition) {
  if (gespeichertePosition) {
   returniere neues Promise((lösen, ablehnen) => {
    setzeTimeout(() => {
     auflösen(gespeichertePosition)
    }, 1000)
   })
  } anders {
   Rückgabewert { x: 0, y: 0 }
  }
 }
})

10. Routing-Konfiguration abschließen

Importieren Sie zuerst Vue und Vue-Router und verwenden Sie dann den Router, um einen Satz von Routing-Informationen zu definieren. Jede Route ist ein Objekt mit den folgenden Eigenschaften:

Der spezifische Code lautet wie folgt:

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren
Vue.use(VueRouter)

const Routen = [
 {
  Weg: '/',
  Umleitung: '/index'
 },
 {
  Pfad: '/index',
  Name: 'Index',
  Komponente: () => import(/* webpackChunkName: "index" */ '@/view/index'),
  Kumpel:
   Titel: 'Homepage',
   Auth: falsch
  }
 },
 {
  Pfad: '/login',
  Name: 'Login',
  Komponente: () => import(/* webpackChunkName: "login" */ '@/view/login'),
  Meta: {
   Titel: 'Anmelden',
   Auth: falsch
  },
  Kinder: [
   {
    Pfad: 'Kinder',
    Name: 'Kinder',
    Komponente: () => import(/* webpackChunkName: "Kinder" */ '@/view/Kinder'),
    Kumpel:
     Titel: 'Verschachtelte Unterrouten',
     Auth: falsch
    }
   }
  ]
 }
]

const router = neuer VueRouter({
 Modus: "Hash",
 Routen
})

Standardrouter exportieren

Hinweis: Verschachtelte Unterrouten müssen im Tag <router-view> der verschachtelten Seite platziert werden.

Zusammenfassen

Dies ist das Ende dieses Artikels zum Vue-Router-Tutorial. Weitere relevante Inhalte zum Vue-Router-Schritt-für-Schritt-Tutorial 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!