Detaillierte Erklärung der Routenkonfiguration von Vue-Router

Inhaltsverzeichnis

einführen
Objektattribute in Routen

Pfad: Zeichenfolge
Komponente: Komponente | () => import(Komponente)
Name: Zeichenfolge
Umleitung: Zeichenfolge | Standort | Funktion
Requisiten: Boolesch | Objekt | Funktion
Alias: Zeichenfolge| Array[Zeichenfolge]
Kinder?: Array[Routenkonfiguration]
beforeEnter: (bis: Route, von: Route, weiter: Funktion) => void

Router-Instanzmethoden

*VueRouter-Instanzeigenschaften
VueRouter-Instanzmethoden

router.push(Zeichenfolge | Standort)

router.replace(Zeichenfolge | Standort)

router.go(Int-Zahl)

router.zurück()

router.vorwärts()

Routing für verzögertes Laden

Kein Lazy Loading

Lazy Loading verwenden

Verlaufsmodus und Hash-Modus

Verlaufsmodus

Hash-Modus

Routenwächter

Globaler Routing-Guard

Fall 1

Fall 2

Fall 3

einführen

In Projekten, die Vue-Router verwenden, ist die Instanziierung von VueRouter dessen Konfigurationsoption „Routes“. Diese Option gibt die Beziehung zwischen Routing- und Ansichtskomponenten oder die Beziehung zwischen Routing und anderem Routing an. Router-Konfigurationsoptionen sind die wichtigste Konfiguration.

Objektattribute in Routen

Schnittstelle RouteConfig = {
  Pfad: Zeichenfolge,
  Komponente?: Komponente,
  Name?: Zeichenfolge, // benannte Routen *Komponenten?: { [Name: Zeichenfolge]: Komponente }, // benannte Ansichtskomponenten https://router.vuejs.org/zh/guide/essentials/named-views.html#%E5%B5%8C%E5%A5%97%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE
  umleiten?: Zeichenfolge | Standort | Funktion,
  Requisiten?: Boolesch | Objekt | Funktion,
  Alias?: Zeichenfolge | Array<Zeichenfolge>,
  children?: Array<RouteConfig>, // Verschachtelte Routen beforeEnter?: (to: Route, from: Route, next: Function) => void,
  *Meta?: beliebig,
  // 2.6.0+
  *caseSensitive?: boolean, // Ist die Übereinstimmungsregel groß- und kleinschreibungsempfindlich? (Standardwert: false)
  *pathToRegexpOptions?: Object // Reguläre Ausdrucksoptionen kompilieren}

Pfad: Zeichenfolge

Geben Sie den Pfad der aktuellen Route an. Wenn die Browser-URL mit dem Pfad übereinstimmt, rendert router-view das aktuelle Routenobjekt, um die Ansichtskomponente(n) anzugeben.

const Routen = [
    {
      Weg: '/',
      Komponente: Startseite
    },
    {
      Pfad: „/Benutzer“,
      Komponente: Benutzer
    }
  ]
  
  const router = neuer VueRouter({
    Routen
  })

Beachten Sie, dass der Router von Vue dynamische Pfade in der Form „/:Eigenschaftsname“ als Teil der aktuellen Pfadzeichenfolge unterstützt. Diese Zeichenfolgenroute wird als dynamische Route verwendet, um die Antwortzeichenfolgeninformationen mit der tatsächlichen URL abzugleichen.

const Routen = [
    {
      Weg: '/',
      Komponente: Startseite
    },
    {
      Pfad:'/user/:id/:local', // dynamischer Pfad:id :local
      Komponente: Benutzer
    }
]
  
const router = neuer VueRouter({
    Routen,
})
//Routensprung <div id="app">
    <Router-Ansicht />
    // Die folgenden Links entsprechen /user/:id/:local <router-link to="/user/007/lk">Benutzer 007</router-link>
    <router-link to="/user/111/js">Benutzer 111</router-link>
    <router-link to="/user/10086/yk">Benutzer 10086</router-link>
    <router-link to="/user/241247/la">Benutzer 241247</router-link>
</div>
/* Wenn wir zur obigen Route springen, kann der Benutzer der entsprechenden Routenansichtskomponente die mit dem dynamischen Pfad übereinstimmenden Informationen über this.$route.params abrufen. Beispiel: url /user/007/lk this.$route.params -> {id:'007',local:'lk'}
      url /Benutzer/10086/yk this.$route.params -> {id:'10086',local:'yk'}
*/

Beachten Sie, dass this.$route das Informationsobjekt der Route ist, auf der sich die aktuelle Vue-Anwendung befindet.

// http://localhost:8080/#/user/10086/cc?wd=iPhone&aa=test
{
    Name: nicht definiert, // Aktueller Routenname *fullPath: "/user/10086/cc" // Vollständiger Pfad der aktuellen URL *hash: "" // Hash der aktuellen Route *übereinstimmend: [{…}] 
    *Meta: {}
    params: {id: "10086", local: "cc"} // Dynamischer Pfad entspricht dem Schlüssel-Wert-Paar-Objekt *path: "/user/10086/cc" // Der Pfad, der mit der aktuellen URL übereinstimmt query: { // Die Abfragezeichenfolge der URL? Das Objekt wurde aus den folgenden Parametern analysiert wd: "iPhone",
        aa: "Prüfung"
    } 
}

Komponente: Komponente | () => importiere(Komponente)

Die Routenkomponente wird gerendert, wenn die aktuelle Browser-URL mit dem Routenpfad übereinstimmt

Vue von „vue“ importieren
Importiere HotMusicList aus '../views/HotMusicList'

const Routen = [
  {
    Pfad: '/hot',
    Komponente: HotMusicList
  },
  {
    // Dynamisches Pfadmatching erhält verschiedene IDs für jeden Song durch: id
    Pfad: '/music/:id',
    // Durch verzögertes Laden von Routen können in Form von Funktionen Komponenten im Projekt, die am Anfang nicht geladen werden dürfen, in das Projekt geladen werden. // Erst wenn der Browser zur aktuellen Route springt, wird die Routenkomponente in das Projekt geladen. // Der Vorteil hierbei besteht darin, dass unnötiges Laden vermieden und die Ladegeschwindigkeit der Anwendung sowie die Bandbreite der Ausführung reduziert werden. Komponente: () => import('../views/MusicPlay') 
  }
]

Hinweis: Wenn bei der Projektentwicklung die Routing-Komponenten nicht zu Beginn der Anwendung geladen werden müssen, verwenden Sie bitte Lazy Loading.

Name: Zeichenfolge

Geben Sie der Route einen Namen, um sie zu einer benannten Route zu machen. Die Routennavigation kann anhand des Namens umgeleitet werden. (Wenn die Route die Standortnavigation verwendet, können nur benannte Routen Pramas-Parameter direkt akzeptieren.)

const Routen = [
  {
    Pfad: '/user', 
    Name: 'Benutzer',
    Komponente: () => import('../views/User.vue')
  }
]

Umleitung: Zeichenfolge | Standort | Funktion

Route umleiten. Wenn die aktuelle Anwendung auf diese Route zugreift und zu ihr navigiert, wird diese Route automatisch (in Form eines Ersatzes) auf die durch die Umleitung angegebene neue Route umgeleitet.

const Routen = [
  {
    Pfad: '/contact',
    Komponente: ContactView
  },
  {
    Pfad: '/user/:id', 
    Name: 'Benutzer',
    Komponente: () => import('../views/User.vue')
  },
  {
    Pfad: '/alterPfad1',
    Umleitung: '/Kontakt'
  },
  {
    Pfad: '/alterPfad2',
    Umleitung: { Name: 'Benutzer', Parameter: { Name: 'Xiao Ming', Alter: 19 } }
  },
  /*
      redirect unterstützt die Form einer Funktion, die einen Parameter empfängt, nämlich das beim Zugriff auf oldpath generierte Standortobjekt. Die Form der Umleitungsfunktion muss den Pfad oder Standort der Umleitungsroute zurückgeben.
  */
  {
    Pfad: '/alterPfad2',
    Umleitung: (alter Pfad) => '/Kontakt'
  }
  {
    Pfad: '/alterPfad4',
    Umleitung: (alter Pfad) => { Name: 'Benutzer', Parameter: { Name: 'Xiao Ming', Alter: 19 } }
  }
]

Requisiten: Boolesch | Objekt | Funktion

Die dynamische Zuordnung von Routen kann im Allgemeinen nur über this.$route.params erfolgen, um den dynamisch zugeordneten Wert zu erhalten. Wenn die Props-Eigenschaft festgelegt ist, können die dynamisch übereinstimmenden Schlüssel-Wert-Paare direkt als Komponenten-Props an die Ansichtskomponente übergeben werden, wodurch die Kopplung der Komponenten erheblich reduziert wird.

Boolescher Wert. Wenn props auf true gesetzt ist, werden alle Schlüssel-Wert-Paare in route.params als Komponenten-Props-Attribute gesetzt.

const Routen = [
  {
    Pfad: '/hot',
    Komponente: HotMusicList
  },
  {
    // Dynamisches Pfadmatching erhält verschiedene IDs für jeden Song durch: id
    Pfad: '/music/:id',
    // Routing der Lazy-Loading-Komponente: () => import('../views/MusicPlay'), 
    Requisiten: wahr
  }
]
// Auf This.$route.id kann innerhalb der Komponente über die Props-ID zugegriffen werden
<Vorlage>
  <div>
      Songwiedergabe <audio controls :src="musicUrl"/>
  </div>
</Vorlage>

<Skript>

Standard exportieren {
  props: ['id'], // Das mit dem dynamischen Pfad der Route übereinstimmende Schlüssel-Wert-Paar wird automatisch an die gleichnamigen Props der aktuellen Komponente übergeben
  Daten() {
      zurückkehren {
          Musik-URL: ''
      }
  },
  erstellt() {
    holen(`/song/url?id=${this.id}`)
      .then((res) => res.json())
      .then(({ Daten }) => {
          //In der tatsächlichen Entwicklung müssen wir feststellen, ob die Datenanforderung erfolgreich ist. console.log(data[0]);
          // Ordne die Songdaten den Daten zu
        diese.musicUrl = data[0]?.url
      });
  },
};
</Skript>

Die Objekt-Requisiten-Objektform besteht darin, den Objektschlüssel als Namen des Requisitenattributs der Rendering-Komponente zu verwenden, und der Wert ist der entsprechende Attributwert (diese Art des Schreibens des Werts ändert sich nicht, sodass die übergebenen Requisiten alle statische Attribute sind).

{
    Pfad: '/home/:id',
    Name: "Home",
    Requisiten: {
        ein: 1,
        b: falsch
    },
    Komponente: Startseite
}

Die Funktion props empfängt das aktuelle Routeninformationsobjekt als Parameter und gibt ein Objekt zurück. Der Schlüssel des Objekts ist der Name des props-Attributs der Rendering-Komponente und der Wert ist der entsprechende Attributwert.

{
    Pfad: '/home/:id',
    Name: "Home",
    Requisiten: (Route) => ({
        a: route.query.wd, // übergebe die Route query.wd an ein Props der Komponente Home
        b: route.params.id //Übergeben Sie die Route params.id an die b-Eigenschaften der Komponente Home.
    }),
    Komponente: Startseite
}

Alias: Zeichenfolge| Array[Zeichenfolge]

Der Alias der Route. Sie können mehrere Pfade für eine Route festlegen. Beim Zugriff auf diese Aliaspfade wird auf dieselbe Routingkomponente zugegriffen

const Routen = [
  {
    Pfad: '/hot',
    Komponente: HotMusicList,
    Alias: ['/Liste','/Rang','Empfehlen']
  }
]

Kinder?: Array[Routenkonfiguration]

Verschachteltes Routing: Sie können ein sekundäres Routing für die aktuelle Route festlegen

[
    {
    Pfad: '/home',
    Komponente: Home,
    Kinder: [
      {
        Pfad: '/home/follow',
        Komponente: () => import('../views/home/Follow')
      },
      {
        Pfad: 'empfehlen', //Relativer Pfad ohne / vor der Route entspricht "/home/recommed"
        Komponente: () => import('../views/home/Empfehlen')
      }
    ]
    }
]

beforeEnter: (bis: Route, von: Route, weiter: Funktion) => void

Der exklusive Schutz der Route. Wenn die Anwendung zur aktuellen Route navigieren möchte, kann dieser Schutz verwendet werden, um einige logische Operationen auszuführen und zu bestimmen, ob diese Navigation blockiert werden soll.

Router-Instanzmethoden

Konzept: Nach der Konfiguration des VueRouter-Instanzobjekts in Vue verfügt die Vue-Instanz über eine this.$router-Eigenschaft und this.$router ist das aktuelle VueRouter-Instanzobjekt. Es stellt alle programmgesteuerten Navigations-APIs bereit.
Beachten Sie, dass „Router“ ein Routing-Instanzobjekt ist, das die Routing-Attributmethode enthält, „Router“ ein Routing-Instanzobjekt ist, das die Routing-Attributmethode enthält, „Router“ ein Routing-Instanzobjekt ist, das die Routing-Attributmethode enthält, und „Route“ das aktuelle Routing-Vertrauensobjekt für die URL des Browsing-Zugriffs ist

*VueRouter-Instanzeigenschaften

app konfiguriert die Vue-Root-Instanz des aktuellen Routers
Modus Der aktuell vom Router verwendete Modus „Hash“ | „History“
currentRoute Das Routeninformationsobjekt, das der aktuellen Route entspricht

VueRouter-Instanzmethoden

router.push(Zeichenfolge | Standort)

Programmgesteuertes Navigieren zu einer bestimmten Route

<Vorlage>
  <div>
    <h3>Startseite</h3>
    <div Klasse="Tabulator">
      <router-link to="/home/follow">Folgen</router-link>|
      <button @click="gotoRecommend">Empfehlen</button>
    </div>
    <Router-Ansicht />
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Methoden: {
    gotoRecommend() {
      // dies.$router.push("/home/recommend");
      dies.$router.push({Pfad:"/home/recommend", Abfrage:{wd:1,offset:0}})
    },
  },
};
</Skript>

router.replace(Zeichenfolge | Standort)

Ersetzen Sie die aktuelle Route programmgesteuert durch eine neue Route.

<Vorlage>
  <div>
    <h3>Startseite</h3>
    <div Klasse="Tabulator">
      <router-link to="/home/follow">Folgen</router-link>|
      <button @click="gotoRecommend">Empfehlen</button>
    </div>
    <Router-Ansicht />
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Methoden: {
    gotoRecommend() {
      // dies.$router.replace("/home/recommend");
      dies.$router.replace({Pfad:"/home/recommend", Abfrage:{wd:1,offset:0}})
    },
  },
};
</Skript>

router.go(Int-Zahl)

Bewegen Sie programmgesteuert eine Anzahl von Elementen aus dem aktuellen Routenverlaufsstapel vorwärts und rückwärts.

this.$router.go(3) // Gehe 3 Einträge vorwärts vom aktuellen Routenverlaufsstapel this.$router.go(-1) // Gehe 1 Eintrag zurück vom aktuellen Routenverlaufsstapel this.$router.go(0) // Erzwinge eine Aktualisierung der Seite

Beachten Sie, dass, wenn die Vorwärts-/Rückwärtszahl größer als die Länge des Instanzroutenverlaufsstapels ist, zum letzten Element vorgerückt oder zum ersten Element zurückgesprungen wird. Dies wird jedoch nicht empfohlen, da es zu Leistungsproblemen und Seiteneinfrieren führen kann.

router.zurück()

Gehen Sie programmgesteuert eine Route vom aktuellen Routenverlaufsstapel zurück

this.$router.back() // entspricht this.$router.go(-1)

router.vorwärts()

Programmgesteuertes Vorwärtsbewegen um eine Route vom aktuellen Routenverlaufsstapel

this.$router.forward() // entspricht this.$router.go(1)

Routing für verzögertes Laden

Beim Schreiben von Single-Page-Anwendungen mit vue.js ist das gepackte JavaScript-Paket sehr groß, was sich auf das Laden der Seite auswirkt. Wir können Lazy Loading von Routen verwenden, um dieses Problem zu optimieren. Wenn wir eine bestimmte Route verwenden, laden wir die entsprechende Komponente, was effizienter ist.

Kein Lazy Loading

Dabei werden die Komponenten zunächst vorgestellt und vorab geladen. Dann existiert es bereits, unabhängig davon, ob es verwendet wird oder nicht

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren
Home aus '../views/Home.vue' importieren

Vue.use(VueRouter)

const Routen = [
  {
    Weg: '/',
    Name: "Home",
    Komponente: Startseite
  },
]

const router = neuer VueRouter({
  Routen
})

Standardrouter exportieren

Lazy Loading verwenden

Erst wenn die Route genutzt wird, wird die entsprechende Komponente geladen

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

Vue.use(VueRouter)

const Routen = [
  {
    Pfad: '/mock',
    Name: 'Mock',
    // Code-Aufteilung auf Routenebene
    // dies erzeugt einen separaten Block (about.[hash].js) für diese Route
    // das beim Besuch der Route verzögert geladen wird.
    Komponente: () => import(/* webpackChunkName: "about" */ '../views/Mock.vue')
  }
]

const router = neuer VueRouter({
  Routen
})

Standardrouter exportieren

Verlaufsmodus und Hash-Modus

Standard-Hash-Modus des Vue-Routers – verwendet den Hash der URL, um eine vollständige URL zu simulieren, sodass die Seite nicht neu geladen wird, wenn sich die URL ändert.
Wenn wir den hässlichen Hash nicht möchten, können wir den Verlaufsmodus des Routers verwenden, der die API history.pushState vollständig nutzt, um den URL-Sprung abzuschließen, ohne die Seite neu zu laden.

Verlaufsmodus

history – verwendet die neuen Methoden pushState() und replaceState() in der HTML5-Verlaufsschnittstelle. (Erfordert spezielle Browserunterstützung) Diese beiden Methoden werden auf den Verlaufsstapel des Browsers angewendet. Basierend auf den vorhandenen Methoden „Zurück“, „Vorwärts“ und „Gehe“ (die Methoden können in den Instanzmethoden des Routers angezeigt werden) bieten sie die Funktion zum Ändern des Verlaufs. Das Problem ist nur, dass bei der Durchführung von Änderungen, obwohl die aktuelle URL geändert wird, der Browser nicht sofort eine Anfrage an das Backend sendet.

Manuelle Einrichtung

Wirkung

Hash-Modus

Hash – das #-Symbol in der URL in der Adressleiste (dieser Hash ist keine kryptografische Hash-Operation). Beispielsweise lautet der Hashwert in dieser URL: http://localhost:8081/#/form #/form. Seine Besonderheit besteht darin, dass der Hash zwar in der URL erscheint, jedoch nicht in die HTTP-Anforderung aufgenommen wird und keine Auswirkungen auf das Backend hat. Daher wird die Seite beim Ändern des Hashs nicht neu geladen.

Routenwächter

Globaler Routing-Guard

router.beforeEach Frontschutz
*router.beforeResolve Frontschutz
*router.afterEach Post-Guard

Fall 1

In Projekten, die mit Vue-Router entwickelt wurden, wird beim Wechseln zwischen verschiedenen Routen im Allgemeinen die Komponente der ausgehenden Route deinstalliert und die Komponente der eingehenden Route gemountet.
In diesem Fall können wir über den Deklarationszyklus von Vue einige logische Operationen auf der Seite durchführen. Wenn die Anwendung jedoch in einigen Fällen das Benutzererlebnis verbessern, die Häufigkeit der Deinstallation verringern oder die Aktivität verlassener Komponenten beibehalten möchte, verwenden Sie die Keep-Alive-Komponente zum Umschließen der Router-Ansicht. Der Routenschalter deinstalliert dann die verlassenen Komponenten. Wenn Ihre Komponente zu diesem Zeitpunkt beim Ein- oder Austreten der Route einige Vorgänge ausführen muss, um die eigene Daten-DOM-Programmierung der Komponente zu ändern, können Sie sich nicht mehr auf den Vue-Lebenszyklus verlassen. Verwenden Sie in diesem Fall bitte Route Guards innerhalb Ihrer Komponente.

beforeRouteEnter Die Routing-Komponente ist im Begriff,
beforeRouteUpdate (neu in 2.2) Die Routenkomponente wird aktualisiert -> /music/10086 /music/10010
beforeRouteLeave Die Routing-Komponente ist im Begriff,

Standard exportieren {
  Requisiten: ['id'],
  Daten() {
      zurückkehren {
          Musik-URL: ''
      }
  },

  beforeRouteEnter (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 wurde console.log(undefined)
  },
  beforeRouteUpdate (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
  },
  beforeRouteLeave (nach, von, weiter) {
    // Wird aufgerufen, wenn von der entsprechenden Route dieser Komponente weg navigiert wird // Sie können auf die Komponenteninstanz `this` zugreifen
  }
}

Beachten Sie, dass die komponentenspezifischen Routing-Guard-Methoden alle drei Parameter enthalten, um vom nächsten

nach: Standort Das Ziel-Routeninformationsobjekt für diesen Routennavigationssprung
von: Standort Das Routeninformationsobjekt, von dem aus die Routennavigation springt ()
next : Funktion Gibt an, ob diese Methode das Springen dieser Route erlaubt

next() // Routing-Sprünge zulassen next(true) // Routing-Sprünge zulassen next(false) // Routing-Sprünge nicht zulassen next('/') / next({ path: '/' }) // Zu einer anderen Adresse springen. Die aktuelle Navigation wird unterbrochen und eine neue Navigation durchgeführt. Sie können ein beliebiges Standortobjekt an „next“ übergeben und es ermöglicht das Festlegen von Optionen wie „ersetzen: true“, „name: ‚home‘“ usw.
// Beachten Sie, dass nur die nächste Methode von beforeRouteEnter eine Rückruffunktion akzeptieren kann.
// Die Rückruffunktion erhält das aktuelle Routing-Komponenteninstanzobjekt als Parameter, über das wir die aktuelle Komponente bedienen können beforeRouteEnter(to, from, next) {
    console.log(bis, von)
    console.log('Die Komponente wird gerade eingegeben, aber die Komponenteninstanz existiert noch nicht', dies)
    weiter(vm => {
      holen(`/song/url?id=${vm.id}`)
      .then((res) => res.json())
      .then(({ Daten }) => {
          //In der tatsächlichen Entwicklung müssen wir feststellen, ob die Datenanforderung erfolgreich ist. console.log(data[0]);
          // Ordne die Songdaten den Daten zu
        vm.musicUrl = data[0]?.url
      });
    }) // Erlaube das Springen des Routings }

Fall 2

In Projekten, die mit Vue-Router entwickelt wurden, wird beim Wechseln zwischen verschiedenen Routen im Allgemeinen die Komponente der ausgehenden Route deinstalliert und die Komponente der eingehenden Route gemountet.
In diesem Fall können wir über den Deklarationszyklus von Vue einige logische Operationen auf der Seite durchführen. Um jedoch in einigen Fällen die Benutzererfahrung zu verbessern und die Häufigkeit der Deinstallation zu verringern oder die Aktivität verlassener Komponenten beizubehalten, kann die Keep-Alive-Komponente verwendet werden, um die Router-Ansicht zu umschließen, und der Routenschalter deinstalliert die verlassenen Komponenten. Wenn Ihre Komponente zu diesem Zeitpunkt beim Ein- oder Austreten der Route einige Vorgänge ausführen muss, müssen Sie den Status der Komponente selbst nicht ändern, sondern nur bestimmen, ob der Sprung dieser Route zulässig ist. Verwenden Sie in diesem Fall bitte den Router-exklusiven Schutz.

beforeEnter(to, from, next) wird ausgelöst, wenn der Router im Begriff ist, zur aktuellen Route zu navigieren const router = new VueRouter({
  Routen: [
    {
      Pfad: '/foo',
      Komponente: Foo,
      beforeEnter: (bis, von, weiter) => {
        // ...
      }
    }
  ]
})

Beispielkonfiguration für die Route zur exklusiven Anmeldungsüberprüfung

const Routen = [
    {
        Weg: '/',
        Komponente: Startseite
    },
    {
        Pfad: '/discover',
        Komponente: () => import('../views/Discover')
    },
    {
        Pfad: '/mine',
        Komponente: () => import('../views/Mine'),
        //Route exklusiver Schutz beforeEnter(to, from, next) {
            // Weil dieser Guard keine DOM-Operationen durchführt und den eigenen Zustand der Komponente weder liest noch schreibt // Ein solcher Guard kann als routenexklusiver Guard verwendet werden // Der richtige Ansatz ist im Cookie-Speicher if (localStorage.getItem("user")) {
              nächste();
            } anders {
              // Dies steht hier nicht, next empfängt eine Callback-Funktion und springt in die Callback-Funktion // Der folgende Text betritt die persönliche Seite und leitet von der persönlichen Seite zur Anmeldeseite weiter, was einige unnötige Fehler verursachen kann
              // weiter((vm) => {
              // vm.$router.replace('/landr')
              // });
              next({name:'login',params:{to}}); //Diesen Sprung verhindern und direkt zur angegebenen Route navigieren}
          }
    },
    {
        Pfad: '/landr', // Anmelden und Registrieren
        Komponente: () => import('../views/loginanregister/LoginAndRegister'),
        Kinder: [
            {
                Name:'Anmelden',
                Pfad: 'Login',
                Komponente: () => import('../views/loginanregister/Login')
            },
            {
                Pfad: 'Registrieren',
                Komponente: () => import('../views/loginanregister/Register')
            }
        ]
    }
]

Fall 3

Globale Routenwächter: Wenn in der Anwendung mehrere Routen vorhanden sind, die dieselbe logische Routenwächterbeurteilung durchführen müssen, und die logische Operation nicht direkt den Komponenten-DOM oder den Status der Komponentenkomponente ausführen muss, können Sie globale Routenwächter verwenden (die häufigste Anwendung globaler Wächter ist die Anmeldeüberprüfung).
beforeEach(to,from,next) globaler Frontschutz

Vue von „vue“ importieren
Router von „vue-router“ importieren
Home aus '../views/Home' importieren

Vue.use(Router)

const Routen = [
    {
        Weg: '/',
        Name: "Home",
        Komponente: Startseite
    },
    {
        Pfad: '/discover',
        Name: 'Entdecken',
        Komponente: () => import('../views/Discover')
    },
    {
        Pfad: '/mine',
        Name: 'Meins',
        Komponente: () => import('../views/Mine'),
    },
    {
        Pfad: '/landr', // Anmelden und Registrieren
        Komponente: () => import('../views/loginanregister/LoginAndRegister'),
        Kinder: [
            {
                Name: 'Anmelden',
                Pfad: 'Login',
                Komponente: () => import('../views/loginanregister/Login')
            },
            {
                Pfad: 'Registrieren',
                Komponente: () => import('../views/loginanregister/Register')
            }
        ]
    }
]

const router = neuer Router({
    Routen,
    linkExactActiveClass: 'aktiv'
})
// Global Route Guard Alle Routensprünge rufen diesen Guard auf // Der Global Route Guard ist auch der am besten geeignete Ort für die Anmeldeüberprüfung in der Vue-Router-Anwendung router.beforeEach((to, from, next) => {

    if(to.name === "Meins" || to.name === "Entdecken") {
        // Weil dieser Guard keine DOM-Operationen durchführt und den eigenen Zustand der Komponente weder liest noch schreibt // Ein solcher Guard kann als routenexklusiver Guard verwendet werden // Der richtige Ansatz ist im Cookie-Speicher if (localStorage.getItem("user")) {
            nächste();
        } anders {
            // Dies steht hier nicht, next empfängt eine Callback-Funktion und springt in die Callback-Funktion // Der folgende Text betritt die persönliche Seite und leitet von der persönlichen Seite zur Anmeldeseite weiter, was einige unnötige Fehler verursachen kann
            // weiter((vm) => {
            // vm.$router.replace('/landr')
            // });
            next({ name: 'login', params: { to } }); //Diese Weiterleitung verhindern und direkt zur angegebenen Route navigieren}
    }anders {
        nächste()
    }

})

Standardrouter exportieren

router.beforeResolve(to,from,next) globaler Front Guard, nachdem beforeEach ausgelöst wurde
router.afterEach(to, from) globaler Post-Guard, der ausgelöst wird, wenn die Route verlassen wurde. Dieser Guard hat kein Next und die Next-Funktion ändert die Navigation selbst nicht.

Dies ist das Ende dieses Artikels über die detaillierte Konfiguration von Vue-Router-Routen. Weitere relevante Inhalte zur Konfiguration von Vue-Router-Routen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

So verwenden Sie vue3+TypeScript+vue-router
Detaillierte Erläuterung des verschachtelten Routings im Vue-Router
Detaillierte Erläuterung der Anwendungsbeispiele für Vue-Router 4
Vue-Router-Beispielcode zum dynamischen Generieren von Navigationsmenüs basierend auf Backend-Berechtigungen
Detaillierter Installationsprozess und Prinzip des Vue-Routers
Ein super detailliertes Vue-Router Schritt-für-Schritt-Tutorial
Detaillierte Erklärung zur Installation und Verwendung von Vue-Router
Führen Sie die folgenden Schritte aus, um Vue-Router in Vue3 zu verwenden
Vue Router vue-router ausführliche Erklärung Anleitung
So verwenden Sie das Vue-Router-Routing
Vue-Routing – Erklärung zur Verwendung des Vue-Routers

<<: So implementieren Sie die zentrierte Ausrichtung einer CSS-Maske im Vollbildmodus

>>: Detaillierte Erläuterung des MySQL Workbench-Nutzungs-Tutorials