Eine ausführliche Erklärung: Verwendung von Vue Router in Vue3

Vue Router ist ein offizieller Vue.js-Routing-Manager, der tief in den Vue.js-Kern integriert ist und über den er problemlos Routing-Management- und Navigationsfunktionen für Single-Page-Anwendungen (SPA) bereitstellen kann. Heute werden wir über die Dinge sprechen, die Vue Router in Vue 3 verwenden.

Installieren und konfigurieren Sie den Vue Router

Installieren Sie den Vue-Router

Um Vue Router zu installieren, müssen Sie nur das Terminal im Vue-Projekt öffnen und den folgenden Befehl zur Installation eingeben:

npm-Methode zur Installation

npm install vue-router@4

Garninstallation

yarn add vue-router@4

Konfigurieren Sie den Vue-Router

Um die Wartung und Verwaltung unseres späteren Codes zu erleichtern, legen wir den Routing-bezogenen Code im Allgemeinen in einem Ordner ab. Die Schritte zum Konfigurieren des Vue-Routers lauten also wie folgt:

1. Erstellen Sie einen neuen Router-Ordner im Ordner src und eine neue Datei index.js unter diesem Ordner
2. Führen Sie die Methoden createRouter und createWebHashHistory in vue-router in index.js ein und führen Sie die Auslagerungsdatei ein

import {
    
     createRouter,createWebHashHistory } from "vue-router";
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import List from '../views/List.vue'
import Detail from '../views/Detail.vue'

3. Definieren Sie ein Routen-Array in index.js und definieren Sie darin Routing-Regeln

const routes = [
  {
    
    
    path:'/home',
    name:Home,
    component:Home
  },
  {
    
    
    path:'/about',
    component:About
  },
  {
    
    
    path:'/list',
    component:List
  },
  {
    
    
    path:'/detail',
    component:Detail
  },
  {
    
    
    path:'/',
    redirect:'/home'
  }
]

4. Verwenden Sie createRouter in index.js, um eine Routing-Instanz zu erstellen und den Routing-Modus und die oben definierten Routing-Regeln zu konfigurieren

const router = createRouter({
    
    
  history:createWebHashHistory(),
  routes
})

5. Verwenden Sie am Ende von index.js export default, um die oben erstellte Routing-Instanz zu exportieren

export default router

6. Routing registrieren: Importieren Sie die oben erstellte Routing-Datei in main.js und verwenden Sie app.use, um das Routing zu registrieren

import router from './router'
const app = createApp(App)
app.use(router) //注册路由
app.mount('#app')

7. Verwenden Sie Routing-Komponenten in Komponenten.
   Verwenden Sie Komponenten in App.vue <router-view>, um anzuzeigende Komponenten zu rendern, und verwenden Sie <router-link>Komponenten in Tabbar-Komponenten, um Links zu generieren

Code in der App.vue-Komponente

<template>
  <Title></Title>
  <router-view></router-view>
  <Tabbar></Tabbar>
</template>
<script setup>
import Tabbar from './components/Tabbar.vue'; 
import Title from './components/Title.vue'; 

</script>
<style scoped>
</style>

Code in der Tabbar-Komponente

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/list">List</router-link>
    <router-link to="/about">About</router-link>
  </div>
  
</template>
<script setup>
</script>
<style  scoped>
div {
    
    
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
</style>

Bisher haben wir die Konfiguration und den Aufbau des Routings abgeschlossen, das Programm ausgeführt, den Browser aktualisiert, wir können sehen, dass die Seite normal springen kann und die Routing-Funktion implementiert ist.

Obwohl wir oben eine vollständige Routing-Szene implementiert haben, müssen wir noch ein tiefes Verständnis der Grundlagen von Vue Router haben, damit wir Vue Router besser verstehen und verwenden können. Im Folgenden werden einige grundlegende Konzepte in Vue Router vorgestellt.

Das Grundkonzept von Vue Router

1. Router: Vue Router bietet einen Router zum Verwalten von Routen in Ihrer Anwendung. Vue Router instanziiert ein Vue Router-Objekt, registriert Routing-Regeln und verbindet andere Komponenten um es herum.

2. Routen: Routen sind URL-Adressen, die an verschiedene Komponenten verteilt werden. In Vue Router werden Routen normalerweise durch Pfadregeln und entsprechende Komponenten definiert. Wenn die URL des Browsers mit dem Routing-Pfad übereinstimmt, wird die entsprechende Komponente in die Seite geladen. Routing-Informationen können aus dem Routenobjekt abgerufen werden.

3. Routing-Regeln: Routing-Regeln bestehen aus Attributen wie Pfad, Komponente, Name, Meta und Requisiten. Unter diesen stellt Pfad den Pfad der URL dar, Komponente stellt die darzustellende Komponente dar, Name stellt den Routennamen dar, Meta stellt die Metadaten der Route dar und Requisiten stellt die Routen-Requisitendaten dar. Routing-Regeln können im Vue Router registriert werden.

4. Navigationsschutz: Navigationsschutz ist eine Hook-Funktion, die beim Routensprung ausgeführt wird und zur Steuerung der Zugriffsrechte der Route, zur Handhabung der Logik vor und nach dem Routensprung usw. verwendet wird. In Vue Router gehören für die optionale API häufig verwendete Navigationsschutzvorrichtungen beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave usw.; für diejenigen, die eine Kombination aus API und Setup-Funktion zum Schreiben von Komponenten verwenden, können Sie Update- und Leave-Schutzvorrichtungen über onBeforeRouteUpdate bzw. onBeforeRouteLeave hinzufügen.

Einführung in die Konfigurationselemente des Vue Routers

Wenn wir createRouter in Vue Router verwenden, um ein Router-Objekt zu erstellen, werden uns viele Konfigurationselemente bereitgestellt. Der Beispielcode mit vollständigen Konfigurationselementen lautet wie folgt:

const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes: [],
  scrollBehavior: () => ({
    
     top: 0, left: 0 }),
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',
  parseQuery: null,
  stringifyQuery: null,
  fallback: true
})

Die Bedeutung jedes Konfigurationselements im obigen Code ist wie folgt:

1. history: Der Verlaufsmodus der angegebenen Route, derzeit unterstützt createWebHistory()und createWebHashHistory()Modus.

2. routes: Definiert ein Array von Routing - Regeln. Jede Routing-Regel ist ein Objekt, einschließlich Attributen wie path, und .namecomponentmeta

3. scrollBehavior: Eine Konfigurationsfunktion, die das Scrollverhalten beim Umschalten des Routings angibt. Diese Funktion gibt xein yObjekt zurück, das Eigenschaften enthält und die Bildlaufposition nach dem Seitenwechsel angibt.

4. linkActiveClass: Geben Sie den Klassennamen des Links im aktiven Zustand an. Der Standardwert ist 'router-link-active'.

5. linkExactActiveClass: Gibt den Klassennamen des Links an, der genau dem aktiven Status entspricht. Der Standardwert ist 'router-link-exact-active'.

6. parseQueryund stringifyQuery: Funktionen zum Parsen und Serialisieren von Abfrageparametern zum Konfigurieren von Routen. Normalerweise müssen wir diese beiden Funktionen nicht zusätzlich konfigurieren, da Vue Router bereits Standardimplementierungen bereitstellt.

7. fallback: Wird verwendet, um zu konfigurieren, ob der Fallback-Mechanismus des HTML5-Verlaufsmodus aktiviert werden soll. Der Standardwert ist true, was bedeutet, dass bei Nichtübereinstimmung der Route automatisch auf die vorherige Route im Verlauf zurückgegriffen wird.

In den oben genannten Konfigurationselementen müssen wir im Allgemeinen nur die beiden Optionen Verlauf und Routen konfigurieren, und andere Optionen können verstanden werden

Einführung in Konfigurationselemente in Routen

In Vue Router werden Routing-Regeln über routesAttribute . routesHäufig verwendete Konfigurationen in Eigenschaften sind wie folgt:

1. name: Der Name der Routing-Regel. Kann für programmatische Navigation und Routing-Sprünge innerhalb von Komponenten verwendet werden.

2. path: Der Pfad der Route, der dynamische Parameter und reguläre Ausdrücke enthalten kann. Beispielsweise ist /user/:iddie Darstellung der Benutzerseite :idein dynamischer Parameter.

3. redirect: Die Umleitungsregel für die Route. Beispielsweise { path: '/', redirect: '/home' }eine Umleitung, die den Stammpfad einer Route darstellt.

4. component: Die der Route entsprechende Komponente. Kann eine normale Komponentenklasse oder eine asynchron geladene Komponente sein.

5. children: Die untergeordnete Route der aktuellen Route. Dabei kann es sich um ein Array von Routing-Regeln oder um eine Funktion zum dynamischen Generieren von Routing-Regeln handeln.

6. meta: Die Metainformationen der Route, die zur Beschreibung einiger zusätzlicher Informationen zur Route verwendet werden. Zum Beispiel, ob für die Route eine Anmeldung, eine Autorisierungsauthentifizierung usw. erforderlich ist.

7. components: mehrere benannte Ansichtskomponenten, die der Route entsprechen.

Routing-Sprung

Mit Vue Router können wir auf zwei Arten zu Routen navigieren: über router-linkdie to-Methode der Komponente und router.pushprogrammgesteuert mithilfe von Funktionen.

router-linkKomponente verwenden

Durch die Verwendung router-linkvon Komponenten zum Erreichen von Routing-Sprüngen müssen wir nur die Menüschaltfläche router-linkmit Komponenten umschließen und die to-Methode zum Springen verwenden. Der Beispielcode lautet wie folgt:

<div>
    <router-link to="/">Home</router-link>
    <router-link to="/list">List</router-link>
    <router-link to="/about">About</router-link>
</div>

router.pushFunktion verwenden

Verwenden Sie router.pushFunktionen, um Routing-Sprünge programmgesteuert zu implementieren. Wir müssen nur das Klickereignis an die normale Schaltfläche binden und die Methode im Ereignis aufrufen, um router.push()den Sprung zu erreichen. Der Beispielcode lautet wie folgt:

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/list">List</router-link>
    <router-link to="/about">About</router-link>
    <button @click="gotoAbout"> 关于 </button>
  </div>
  
</template>
<script setup>
import {
    
     useRouter } from 'vue-router'
const router = useRouter()
const gotoAbout = () => {
    
    
  router.push('/about')
}
</script>

Durch die Verwendung router.pushdieser Methode wird ein neuer Datensatz zum Verlaufsstapel hinzugefügt. Wenn der Benutzer also auf die Zurück-Schaltfläche des Browsers klickt, kehrt er zur vorherigen URL zurück.

<router-link>Wenn wir auf klicken, ruft Vue Router diese Methode tatsächlich intern auf, sodass <router-link :to="..."> das Klicken einem Aufruf entsprichtrouter.push(...)

router.push()Der Parameter in der Methode kann ein String-Pfad oder ein Objekt sein, das die Adresse beschreibt.

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({
    
     path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({
    
     name: 'user', params: {
    
     username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({
    
     path: '/register', query: {
    
     plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({
    
     path: '/about', hash: '#team' })

Routing-Parameter

In Vue Router können Routing-Parameter auf folgende Weise übergeben und abgerufen werden

1. Übergeben Sie Parameter über den Routing-Pfad: Verwenden Sie Dynamic Route Matching in der Routing-Konfiguration, zum Beispiel:

const routes= [
    {
    
    
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ]

Verwenden Sie einen Doppelpunkt im Routing-Pfad, um Parameter darzustellen, und die Parameterwerte werden in route.paramsdas Objekt eingefügt. route.paramsWir können Parameter durch Aufrufen abrufen. Wenn die Zugriffsadresse /detail/123 lautet, können wir den Wert „123“ über route.params.id abrufen.

2. Übergeben Sie Parameter über Abfrageparameter: Verwenden Sie Abfrageparameter beim Routing von Sprüngen, zum Beispiel:

// 在组件中跳转
router.push({
    
    
  path: '/detail',
  query: {
    
     id: 123 }
})

// 在模板中跳转
<router-link to="/detail?id=123">Detail</router-link>

Wenn der Abfrageparameter in der Route verwendet wird, wird der Parameterwert route.queryin das Objekt eingefügt. Wir können Parameter über route.query abrufen. Wenn die Zugriffsadresse beispielsweise /detail?id=123 lautet, können wir den Wert „123“ über route.query.id erhalten.

3. Parameter werden über die Option props in der Routing-Konfiguration übergeben. Zum Beispiel:

const routes= [
    {
    
    
      path: '/detail/:id',
      name: 'Detail',
      component: Detail,
      props: {
    
     id: 123 }
    }
  ]

Komponenten können Requisiten direkt verwenden, um Parameter zu empfangen

4. Parameter werden über Metaoptionen in der Routenkonfiguration übergeben. Zum Beispiel:

const routes= [
    {
    
    
      path: '/detail/:id',
      name: 'Detail',
      component: Detail,
      meta: {
    
     id: 123 }
    }
  ]

Parameter können über route.meta in Komponenten abgerufen werden.

dynamisches Routing

Eine dynamische Route ist eine Route, die einen Teil einer Route als Parameter verwendet. Wenn wir beispielsweise für jeden Benutzer eine separate Seite erstellen möchten, können wir dynamisches Routing verwenden und eine Route mit einem Pfad erstellen, bei dem es sich um /users/:userIdeinen :userIdParameter handelt.

Beim dynamischen Routing werden beim Definieren von Routen Doppelpunkte () zur Darstellung von Parametern verwendet :. Das Definieren dynamischer Routen erfordert die Verwendung von pathMethodendefinitionen. Um beispielsweise eine dynamische Route zu definieren, können wir schreiben:

{
    
    
  path: '/users/:userId',
  name: 'user',
  component: User
}

Im obigen Code stellt der Pfad :userIdeinen Parameter dar, der paramsaus den Eigenschaften des Routenobjekts abgerufen werden kann. In der Komponente kann es so gelesen werden userId:

console.log(route.params.userId)

Bei Verwendung von dynamischem Routing unterstützt Vue Router auch optionale Parameter und reguläre Ausdrücke zum Definieren von Routen. Sie können beispielsweise eine dynamische Route mit optionalen Parametern wie folgt definieren:

{
    
    
  path: '/users/:userId/:postId?',
  name: 'post',
  component: Post
}

Im obigen Code postIdsind die Parameter im Pfad optional, und wir fügen dahinter ein Fragezeichen ein, um optionale Parameter darzustellen. Nun, wenn der Pfad ist /users/123, dann postIdwird er sein undefined; wenn der Pfad ist /users/123/456, dann postIdwird er sein 456.

verschachtelte Routen

Mit verschachtelten Routen können wir mehrere Unterrouten unter einer übergeordneten Route verschachteln, um eine komplexere Seitenstruktur zu bilden.

routesUm eine verschachtelte Route zu definieren, können wir ein Array von Sub-Routing-Objekten im Array der übergeordneten Route definieren. Jedes Sub-Routing-Objekt enthält ein pathund eine componentEigenschaft, die den Zugriffspfad des aktuellen Sub-Routings und der entsprechenden Komponente angibt. Gleichzeitig können wir im Sub-Routing-Objekt auch Unterrouten von Unterrouten definieren und so eine verschachtelte Routing-Struktur bilden.

Wir verwenden Konfigurationselemente, childrenum die Verschachtelungsbeziehung von Routen darzustellen, wie im folgenden Beispielcode gezeigt:

const routes = [
    {
    
    
      path: '/',
      component: Home,
      children: [
        {
    
    
          path: 'about',
          component: About
        },
        {
    
    
          path: 'contact',
          component: Contact
        }
      ]
    }
  ]

Im obigen Code haben wir eine HomeKomponente definiert, die als Komponente der übergeordneten Route benannt ist, und childrenzwei untergeordnete Routen im Array definiert: Aboutund Contact. Wenn der Benutzer auf diese Weise /aboutoder besucht /contact, rendert Vue Router die entsprechende Unterkomponente und verschachtelt sie in Homeder Komponente.

benannte Route

Benannte Routen können einen Namen für die Route festlegen, damit sie im Code referenziert und übersprungen werden kann. Die Verwendung benannter Routen kann den Code klarer und verständlicher machen, insbesondere wenn Sie zu einer Route mit dynamischen Parametern springen müssen.

Um eine benannte Route zu definieren, können wir ein Attribut im Routenobjekt verwenden, nameum den Namen der Route anzugeben, zum Beispiel:

const routes = [
    {
    
    
      path: '/',
      name: 'home',
      component: Home
    },
    {
    
    
      path: '/about',
      name: 'about',
      component: About
    },
    {
    
    
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]

Im obigen Code haben wir Namen für die drei Routen angegeben: home, , aboutund user. Dann können wir im Code diese Namen verwenden, um entsprechende Routing-Links oder Routing-Sprünge zu generieren, zum Beispiel:

<router-link :to="{name: 'home'}">Home</router-link>

<router-link :to="{name: 'about'}">About</router-link>

<router-link :to="{name: 'user', params: {id: '123'}}">User 123</router-link>

router.push({
    
    name: 'home'})

router.push({
    
    name: 'user', params: {
    
    id: '456'}})

Im obigen Code haben wir <router-link>Komponente bzw. router.push()Methode verwendet, um zur Route mit der benannten Route zu springen. Unter anderem paramskönnen durch die Verwendung von Attributen die Parameter in der Route dynamisch angegeben werden.

Benannte Routen sind praktisch für Situationen, in denen Parameter dynamisch übergeben werden müssen.

Streckenwächter

Ein Routenwächter ist eine Funktion, die in jeder Phase der Route aufgerufen wird und zum Abfangen des Routenzugriffs oder zum Ausführen einiger Vorgänge auf der Route verwendet werden kann. Mit Route Guards können wir die Umleitung und Zugriffsrechte von Routen steuern.

Bei Routing-Guards verwenden wir normalerweise drei Parameter: to, fromund next.

• to: Gibt das umzuleitende Ziel-Routing-Objekt an, einschließlich Routing-Pfad, Parametern, Abfragezeichenfolge und anderen Informationen.

• from: Zeigt das aktuelle Routing-Objekt an, d. h. das Routing-Objekt, das abreist.

• next: Es handelt sich um eine Funktion zur Routing-Steuerung und zum Springen. Beim Aufruf der Funktion nextwird die Weiterleitung nach unten fortgesetzt. Wir können nextdas Verhalten des Routings durch Funktionen steuern, z. B. das Rendern von Komponenten, das Springen zum Routing, das Abbrechen von Vorgängen usw.

Mehrere nextFälle der Verwendung von Funktionen

• next(): bedeutet, dass der nächste Routing-Schutz weiterhin ausgeführt wird.

• next(false): Zeigt an, dass der aktuelle Routing-Sprung abgebrochen werden soll.

• next('/path'): Zeigt an, dass zum angegebenen Routing-Pfad gesprungen wird.

• next(error): Zeigt an, dass während des Routing-Sprungs ein Fehler aufgetreten ist, z. B. unzureichende Berechtigungen.

Es ist zu beachten, dass wir bei Verwendung von Routenwächtern nextdie Funktion zur Steuerung des Sprungs und der Funktion der Route explizit aufrufen müssen, da die Route sonst nicht weiter nach unten ausgeführt wird. Bei verschiedenen Wachen nextunterscheiden sich auch das Verhalten und die Funktion der Funktion und sie muss entsprechend der jeweiligen Szene aufgerufen werden.

Die Routing-Guards in Vue Router sind in globale Routing-Guards und Routing-exklusive Guards unterteilt:

Globaler Routenwächter

Der Global Routing Guard ist ein in der gesamten Anwendung wirksamer Wächter, mit dem alle Routing-Vorgänge abgefangen werden können. In Vue Router@4 gibt es drei globale Wächter: beforeEach, beforeResolveund afterEach.

• beforeEach: Wird vor Routing-Sprüngen ausgeführt und kann für die globale Zugriffskontrolle oder Umleitungssprünge und andere Vorgänge verwendet werden.

• beforeResolve: Wird vor Abschluss des Routing-Sprungs ausgeführt und kann zum Warten auf das Laden der asynchronen Routing-Komponente oder zum Ausführen einiger Vorgänge vor dem Routing-Sprung verwendet werden.

• afterEach: Wird nach Abschluss des Routing-Sprungs ausgeführt und kann zum Ausführen einiger Vorgänge auf der Seite verwendet werden, z. B. zum Überwachen des vergrabenen Punkts der Seite oder zum Ändern des Seitentitels.

Ein Beispielcode für einen Routing-Guard, der überprüft, ob ein Benutzer angemeldet ist, lautet wie folgt

router.beforeEach((to, from, next) => {
    
    
  if (to.name !== 'Login' && !isAuthenticated) next({
    
     name: 'Login' })
  else next()
})

Wenn der Benutzer im obigen Code nicht angemeldet ist, springt die Seite zur Anmeldeseite, und wenn der Benutzer bereits angemeldet ist, wird der Sprung next() ausgeführt

Routing Exclusive Guard

Der Route Exclusive Guard wirkt sich nur auf die aktuelle Route aus und kann verwendet werden, um die Zugriffsrechte einer bestimmten Route einzuschränken oder zu erweitern. In Vue Router@4 gibt es zwei exklusive Routing-Guards: beforeEnterund leaveGuard.

• beforeEnter: Wird vor der Eingabe der aktuellen Route ausgeführt und kann verwendet werden, um die Zugriffsrechte der aktuellen Route zu erweitern oder verwandte Vorgänge auszuführen.

• leaveGuard: Wird vor dem Verlassen der aktuellen Route ausgeführt und kann verwendet werden, um den Benutzer aufzufordern oder entsprechende Vorgänge auszuführen.

Wenn wir Route Guards verwenden, können wir createRouterdiese in Funktionen registrieren, zum Beispiel:

const routes=[
    {
    
    
      path: '/',
      component: Home
    },
    {
    
    
      path: '/about',
      component: About,
      beforeEnter: (to, from, next) => {
    
    
        // 进行路由访问控制或相关操作
      }
    }
  ]

Routing Lazy Loading

Routing Lazy Loading ist eine Möglichkeit, Routing-Komponenten bei Bedarf asynchron zu laden. Nur wenn die entsprechende Komponente der Route verwendet werden muss, wird der der Komponente entsprechende Code dynamisch geladen. Durch die Verwendung von Route Lazy Loading kann die Leistung der Anwendung optimiert werden

Mithilfe des verzögerten Routenladens in Vue Router können wir es auf zwei Arten implementieren: mithilfe import()und dynamischimport()

Verwenden Sie import(), um verzögertes Laden zu implementieren

const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')
const routes = [
	{
    
    
      path: '/',
      component: Home
    },
    {
    
    
      path: '/about',
      component: About
    }
 ]
const router = createRouter({
    
    
  history: createWebHistory(),
  routes
})

Verwenden Sie dynamisches Import(), um verzögertes Laden zu implementieren

const routes = [
    {
    
    
      path: '/',
      component: () => import('./views/Home.vue')
    },
    {
    
    
      path: '/about',
      component: () => import('./views/About.vue')
    }
]
const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes
})

Hinweise zur Verwendung von Vue Router

1. Dynamische Parameter dürfen keinen Schrägstrich enthalten: Bitte beachten Sie bei der Verwendung dynamischer Parameter, dass die URL nicht mit den dynamischen Parametern identisch sein darf.

2. Navigationsprozess: Das Routing ähnelt einem Stapel, und jeder Routing-Sprung wird im Verlauf im Verlauf aufgezeichnet. Wenn Sie zur gleichen Route springen, werden die letzten Male im Verlauf ignoriert. Standardmäßig löst die neue umgeleitete Route den Routenaktualisierungsprozess nicht aus. Sie müssen explizit die Methode router.pushoder verwenden router.replace, um auf die aktuelle Route zu aktualisieren.

3. Die Navigation wird abgebrochen: Wenn Sie einen asynchronen Vorgang in beforeRouteLeaveoder Guard ausführen, müssen Sie sicherstellen, dass der asynchrone Vorgang abgeschlossen und aufgerufen wurde , um sicherzustellen, dass die Navigation fortgesetzt werden kann.beforeRouteUpdatenext(true)

OK, dies ist das Ende des Chats über die Verwendung von Vue Router in vue3. Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht im Kommentarbereich. Wenn es Ihnen gefällt, liken Sie es bitte, folgen Sie es und fügen Sie es zu Ihren Favoriten hinzu! !