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

Vue3 ist die neueste Vue-Version und ihre Routing-Funktion hat im Vergleich zur Vue2-Version große Änderungen erfahren. Als eines der wichtigen Tools zur Implementierung von Single-Page-Anwendungen (SPA) werden Routing-Funktionen in Vue3 häufig verwendet. In diesem Artikel erklären wir die Routing-Funktion in Vue3 ausführlich, einschließlich Routing-Sprüngen und deren Implementierung.

1. Einführung in die Routing-Funktion von Vue3

Die Routing-Funktion in Vue3 besteht hauptsächlich aus zwei Teilen: Routing-Instanz und Router. Unter diesen ist die Routing-Instanz eine Vue-Router-Instanz, die zum Definieren von Routen und ihren Sprungpfaden verwendet wird, und der Router ist dafür verantwortlich, die Routing-Instanz in die Vue-Instanz einzufügen, um sie wirksam zu machen und Routing-Sprünge zu ermöglichen.

2. Routing-Instanz

1. Erstellen Sie eine Routing-Instanz

In Vue3 können wir eine Routing-Instanz erstellen, indem wir die Vue-Router-Funktion aufrufen:

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})

Im obigen Code: createRouter() kann ein Konfigurationsobjekt akzeptieren, einschließlich zweier Eigenschaften: <code>history und routes. Unter diesen wird history zum Angeben des Routing-Modus und routes zum Definieren der Routing-Tabelle verwendet. createRouter()函数可以接受一个配置对象，包括history和routes两个属性。其中history用于指定路由模式，routes则用于定义路由表。

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';

<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<RouterLink to="/contact">Contact</RouterLink>

在上述示例中，我们使用<routerlink></routerlink>组件代替了Vue2版本中的<router-link></router-link>

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. 🎜

🎜In der Routing-Tabelle können wir path und component verwenden, um Routing-Pfade und Routing-Komponenten zu definieren. Der Beispielcode lautet wie folgt: 🎜rrreee🎜The Der Routing-Pfad kann als Platzhalter zur Darstellung dynamischer Parameter verwendet werden. Der Beispielcode lautet wie folgt: 🎜rrreee🎜Im obigen Beispiel zeigt der Doppelpunkt im Routing-Pfad /user/:id an, dass der Pfad übereinstimmen kann Als dynamischer Parameter können wir das Attribut props übergeben, um dynamische Parameter als Komponenteneigenschaften an die Routing-Komponente zu übergeben. 🎜

🎜Verschachteltes Routing🎜🎜🎜In 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: 🎜rrreee🎜Im obigen Beispiel haben wir eine Datei mit dem Namen Layout unter / definiert. Code> Pfad-Routing-Komponente und machen Sie sie zum übergeordneten Pfad der verschachtelten Route. In der Komponente <code>Layout gibt es drei Unterrouten, die unterschiedlichen Pfaden entsprechen. 🎜
🎜Route Guard🎜🎜🎜Route 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; 🎜🎜<code>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 createApp aufrufen. Der Beispielcode lautet wie folgt: 🎜rrreee🎜Im obigen Code verwenden wir die Funktion createApp Erstellen Sie eine Vue-Instanz und fügen Sie die Routing-Instanz router über die Methode use in die Vue-Instanz ein. 🎜
🎜Routensprung🎜🎜🎜In Vue3 können wir einen Routensprung implementieren, indem wir die Methode router.push aufrufen. Die Methode router.push akzeptiert einen Parameter, um den Routing-Pfad anzugeben, der übersprungen werden muss. Der Beispielcode lautet wie folgt: 🎜rrreee🎜Im obigen Beispiel verwenden wir die Komponente <routerlink></routerlink> anstelle der Komponente <router-link></router-link> 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. 🎜

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Routing-Funktionen in Vue3: Implementierung von Routing-Sprüngen für SPA-Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!