Vue3-Routing (Vue Router)

In diesem Kapitel führen wir in das Vue-Routing ein.

Vue-Routing ermöglicht es uns, über verschiedene URLs auf unterschiedliche Inhalte zuzugreifen.

Mit Vue können wir Multi-View-Single-Page-Webanwendungen (SPA) umsetzen.

Vue.js-Routing erfordert das Laden dervue-router-Bibliothek

URL der chinesischen Dokumentation:vue-router-Dokumentation。

Vue Router ist dafür verantwortlich, URL-Pfade auf Komponenten in der Anwendung abzubilden. Wenn Benutzer in der App navigieren, wird die URL aktualisiert, aber die Seite wird nicht neu geladen, was ein reibungsloses Benutzererlebnis bietet.

Die obige Abbildung zeigt einezweistufig verschachtelte Routenstruktur：

• oberste Ebene (App.vuevon<router-view>)verantwortlich für das Rendern voneigenständigen Layouts(wie zum BeispielLogin.vue) oderHauptrahmen-Layout（Layout.vue）。
• Hauptrahmen-Layout (Layout.vue)enthält intern eine zweite<router-view>, die verwendet wird, umuntergeordnete Komponenten der Funktionsseite zu rendern(wie zum BeispielDashboard.vue、User.vue), wodurch eine dauerhafte Anzeige von Kopfzeile, Seitenleiste und Fußzeile erreicht wird.
• Nicht übereinstimmende Pfade führen schließlich zu einer unabhängigenpage404.vue。

Kernkomponenten

Installation

npm-Installation

npm install vue-router

npm (China-Spiegel)

Es wird empfohlen, den Taobao-Mirror zu verwenden:

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install vue-router@4

Direkter Download / CDN

https://unpkg.com/vue-router@4

Grundlegende Verwendung

1. Routing-Tabelle erstellen

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

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

export default createRouter({
  history: createWebHistory(),
  routes
})

2. In der Anwendung mounten

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

3. Seiten-Outlet

<router-view></router-view>

4. Navigation

<router-link to="/about">About</router-link>

5. Dynamisches Routing

{ path: '/user/:id', component: User }

Beim Aufruf von /user/10, $route.params.id === '10'.

6. Lazy Loading

const About = () => import('../views/About.vue')

7. Navigationswächter (Authentifizierung)

router.beforeEach((to, from, next) => {
  next()
})

8. Weiterleitung

{ path: '/old', redirect: '/' }

9、404

{ path: '/:pathMatch(.*)*', component: NotFound }

Einfaches Beispiel

Vue.js + vue-router können ganz einfach eine Single-Page-Anwendung implementieren.

<router-link>ist eine Komponente, mit der ein Navigationslink eingerichtet wird, um zwischen verschiedenen HTML-Inhalten zu wechseln.toDas `to`-Attribut ist die Zieladresse, d. h. der anzuzeigende Inhalt.

Im folgenden Beispiel fügen wir vue-router hinzu, konfigurieren dann Komponenten- und Routenzuordnungen und teilen vue-router anschließend mit, wo sie gerendert werden sollen. Der Code sieht wie folgt aus:

router-link

Beachten Sie, dass wir kein reguläres `<a>`-Tag verwendet haben, sondern eine benutzerdefinierte Komponente `router-link` zum Erstellen von Links genutzt haben. Dadurch kann Vue Router die URL ändern, ohne die Seite neu zu laden, und die URL-Generierung und -Kodierung übernehmen. Wir werden später sehen, wie wir von diesen Funktionen profitieren können.

router-view

`router-view` zeigt die Komponente an, die der URL entspricht. Sie können es überall platzieren, wo es zu Ihrem Layout passt.

Bei angeklickten Navigationslinks werden Stile hinzugefügtclass ="router-link-exact-active router-link-active"。

Anwendungsbeispiel

Das folgende Beispiel behandelt die Routing-Definition、Erstellung、Mounten、NavigationundRenderingfünf Kernschritte.

1. main.js (Einstiegsdatei)

2. router/index.js (Routenkonfiguration)

3. App.vue (Root-Komponente)

Wenn du diese Anwendung ausführst:

• Klicke auf denHome-Link, die URL ändert sich zu/，<router-view>wird angezeigt inHome PageKomponenteninhalt.
• Klicke auf denAbout-Link, die URL ändert sich zu/about，<router-view>wird angezeigt inAbout UsKomponenteninhalt.
• Klicke auf den404 Demo-Link, die URL ändert sich zu/nonexistent，<router-view>wird angezeigt in404 Not FoundKomponenteninhalt.

<router-link> zugehörige Attribute

Als Nächstes lernen wir mehr über die Attribute von <router-link>.

auf

Stellt den Link zur Zielroute dar. Beim Klick wird der Wert von `to` sofort an `router.push()` übergeben, daher kann dieser Wert eine Zeichenkette oder ein Objekt sein, das den Zielort beschreibt.

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home.html">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

ersetzen

Wenn das Attribut replace gesetzt ist, ruft der Klick router.replace() anstelle von router.push() auf, und nach der Navigation bleibt kein Verlaufseintrag zurück.

<router-link :to="{ path: '/abc'}" replace></router-link>

append

Wenn das Attribut append gesetzt ist, wird der Pfad dem aktuellen (relativen) Pfad vorangestellt. Wenn wir beispielsweise von /a zu einem relativen Pfad b navigieren, lautet der Pfad ohne append /b, mit append /a/b.

<router-link :to="{ path: 'relative/path'}" append></router-link>

-Tag hinzu

Manchmal möchte man<router-link>um als bestimmtes Tag zu rendern, zum Beispiel<li>.tagAlso verwenden wir

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class

Prop, um anzugeben, welches Tag. Es hört weiterhin auf Klicks und löst die Navigation aus.

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Legt den CSS-Klassennamen fest, der verwendet wird, wenn der Link aktiv ist. Er kann durch den folgenden Code ersetzt werden.classHinweis hieractive-class="_active"。

exact-active-class

Verwenden Sie

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

event

Konfiguriert die Klasse, die aktiv sein soll, wenn der Link genau übereinstimmt. Sie kann durch den folgenden Code ersetzt werden.

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

Der obige Code setzt das Ereignis auf mouseover, und wenn die Maus über Router Link 1 bewegt wird, ändert sich der navigierte HTML-Inhalt.

Vue Router (v4, Vue 3) Handbuch zur Kern-API

I.createRouterKonfigurationsoptionen

II. History-Factory

III.RouteRecord(Route-Datensatz)

IV. Router-Navigation (Router-Instanzmethoden)

V. Navigationswächter

VI.<router-link>Props

VII.<router-view>Props

VIII.Route(Aktuelles Routenobjekt)

Dieses Objekt erhält man überuseRoute()oderthis.$routeermittelt werden.

IX. Composition API

X. Programmatische Navigation (Vollständiges Beispiel)