Detaillierte Erläuterung der Routing-Funktionen in Vue3: Implementierung von Routing-Sprüngen für SPA-Anwendungen

2. 路由表定义

路由表是由路由配置对象数组组成的，数组中每个对象都表示一个路由的定义，包括以下几个属性：

• path：路由路径；
• component：路由组件；
• name：路由名称；
• meta：路由元信息。

在路由表中，我们可以使用path和component来定义路由路径和路由组件，示例代码如下：

import Home from '@/views/Home.vue'; import About from '@/views/About.vue'; import Contact from '@/views/Contact.vue'; const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ]

路由路径可以使用占位符来表示动态参数，示例代码如下：

const router = createRouter({ routes: [ { path: '/user/:id', component: User, props: true } ] })

上述示例中，路由路径/user/:id中的冒号表示该路径可以匹配一个动态参数，我们可以通过props属性来将动态参数作为组件属性传递到路由组件中。

3. 嵌套路由

在Vue3中，我们可以使用嵌套路由来组织应用的路由结构。嵌套路由是指路由路径包含多个层级的情况，示例代码如下：

const router = createRouter({ routes: [ { path: '/', component: Layout, children: [ { path: '', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ] } ] })

上述示例中，我们在/路径下定义了一个名为Layout的路由组件，并将其作为嵌套路由的父级路径。Layout组件中存在三个子路由，分别对应不同的路径。

4. 路由守卫

路由守卫用于在路由跳转前或跳转后执行一些逻辑操作。在Vue3中，路由守卫主要分为全局守卫、路由守卫和组件守卫三类。

全局守卫有三种：

• beforeEach：在路由跳转前执行逻辑；
• beforeResolve：在路由解析完成后，进行路由匹配前执行的逻辑；
• afterEach：路由跳转后执行的逻辑。

路由守卫分为两种：

• beforeEnter：在进入路由之前执行的逻辑；
• beforeLeave：在离开路由之前执行的逻辑。

组件守卫是针对组件级路由而言，包括以下几种：

• beforeRouteEnter：在组件进入路由前执行的逻辑；
• beforeRouteUpdate：在组件更新路由前执行的逻辑；
• beforeRouteLeave：在组件离开路由前执行的逻辑。

三、路由器

1. 注入路由

在创建好路由实例后，我们需要将其注入到Vue实例中，使之生效。在Vue3中，我们可以通过调用createApp函数来创建Vue实例，示例代码如下：

import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; const app = createApp(App); app.use(router); app.mount('#app');

在上述代码中，我们使用createApp函数创建Vue实例，并通过use方法将路由实例router注入到Vue实例中。

2. 路由跳转

在Vue3中，我们可以通过调用router.push方法实现路由跳转。router.push方法接受一个参数，用于指定需要跳转的路由路径。示例代码如下：

import { RouterLink } from 'vue-router'; Home About Contact

在上述示例中，我们使用组件代替了Vue2版本中的

Routing-Tabellendefinition
Die Routing-Tabelle besteht aus einem Array von Routing-Konfigurationsobjekten. Jedes Objekt im Array stellt die Definition einer Route dar, einschließlich der folgenden Attribute:

path: Routing-Pfad; component: Routing-Komponente; meta: Metainformationen weiterleiten.

Verschachteltes RoutingIn Vue3 können wir verschachteltes Routing verwenden, um die Routing-Struktur der Anwendung zu organisieren. Verschachteltes Routing bezieht sich auf die Situation, in der der Routing-Pfad mehrere Ebenen enthält. Der Beispielcode lautet wie folgt: rrreeeIm obigen Beispiel haben wir eine Datei mit dem Namen Layoutunter / definiert. Code> Pfad-Routing-Komponente und machen Sie sie zum übergeordneten Pfad der verschachtelten Route. In der Komponente Layoutgibt es drei Unterrouten, die unterschiedlichen Pfaden entsprechen.
Route GuardRoute Guard wird verwendet, um einige logische Operationen vor oder nach dem Routensprung auszuführen. In Vue3 werden Routing Guards hauptsächlich in drei Kategorien unterteilt: Global Guards, Routing Guards und Component Guards. Es gibt drei Arten von globalen Wächtern:
beforeEach: Logik vor dem Routensprung ausführen; beforeResolve: nach Abschluss der Routenanalyse, vor dem Routenabgleich Ausführungslogik; afterEach: Logik, die nach dem Routing-Sprung ausgeführt wird.
Routenwächter werden in zwei Typen unterteilt:
beforeEnter: Logik, die vor dem Betreten der Route ausgeführt wird; beforeLeave: vor dem Verlassen der Route Ausführungslogik.
Komponentenwächter dienen dem Routing auf Komponentenebene und umfassen Folgendes:
beforeRouteEnter: Logik, die ausgeführt wird, bevor die Komponente in die Route eintritt; beforeRouteUpdate code>: Logik wird ausgeführt, bevor die Komponente die Route aktualisiert; beforeRouteLeave: Logik wird ausgeführt, bevor die Komponente die Route verlässt.
3. Router Inject Routing Nachdem wir die Routing-Instanz erstellt haben, müssen wir sie in die Vue-Instanz injizieren, damit sie wirksam wird. In Vue3 können wir eine Vue-Instanz erstellen, indem wir die Funktion createAppaufrufen. Der Beispielcode lautet wie folgt: rrreeeIm obigen Code verwenden wir die Funktion createAppErstellen Sie eine Vue-Instanz und fügen Sie die Routing-Instanz routerüber die Methode usein die Vue-Instanz ein.
RoutensprungIn Vue3 können wir einen Routensprung implementieren, indem wir die Methode router.pushaufrufen. Die Methode router.pushakzeptiert einen Parameter, um den Routing-Pfad anzugeben, der übersprungen werden muss. Der Beispielcode lautet wie folgt: rrreeeIm obigen Beispiel verwenden wir die Komponente anstelle der Komponente in Vue2 Version zur Implementierung von Routensprung. Das Obige ist eine detaillierte Erläuterung der Routing-Funktion in Vue3, einschließlich der Verwendung von Routing-Instanzen und Routern sowie der Implementierung von Routing-Sprüngen. Durch das Studium dieses Artikels glaube ich, dass jeder die Routing-Funktion in Vue3 besser versteht.