


Lassen Sie uns über Routing in Vue3 sprechen und kurz die Routing-Konfigurationsmethoden analysieren
Dieser Artikel führt Sie durch das Routing in Vue3 und spricht über die Grundkonfiguration des Routings, die dynamische Routing-Konfiguration, den Routing-Modus, die Routing-Umleitung usw. Ich hoffe, er wird Ihnen hilfreich sein.
【Verwandte Empfehlung: „vue.js-Tutorial“
Grundlegende Konfiguration des Routings
1. Installieren Sie das Plug-in
npm install vue-router@next --save
2. Erstellen Sie eine routers.ts-Datei
3 .ts Komponenten vorstellen und Pfade konfigurieren.
import { createRouter,createWebHashHistory } from 'vue-router'; // 引入组件 import Home from './components/Home.vue'; import News from './components/News.vue'; import User from './components/User.vue'; const router = createRouter({ history: createWebHashHistory(), routes: [ {path: '/', component: Home}, {path: '/news', component: News}, {path: '/user', component: User}, ] }) export default router;
4. Mounten Sie die Routing-Datei in vue in main.ts.
import { createApp } from 'vue' import App from './App.vue' import routers from './routers'; // createApp(App).mount('#app') const app = createApp(App); app.use(routers); app.mount('#app');
5. Nachdem die Komponente, die Routing verwendet, den Router-Link über die Router-View-Komponente oder den Router-Link bereitstellt
<template> <img alt="Vue logo" src="./assets/logo.png"> <ul> <li> <router-link to="/">首页</router-link> </li> <li> <router-link to="/news">新闻</router-link> </li> <li> <router-link to="/user">用户</router-link> </li> </ul> <router-view></router-view> </template>
, müssen Sie nur die angegebene Route auf dem Seitenpfad eingeben, der der Komponente entspricht, um den Sprung abzuschließen . Router -Link implementiert Routing in Form eines Labelsprungs.
Konfiguration des dynamischen Routings
Konfigurieren Sie das Routing in Routes.ts wie folgt und konfigurieren Sie das dynamische Routing über /:aid.
//配置路由 const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', component: Home , alias: '/home' }, { path: '/news', component: News }, { path: '/user', component: User }, { path: '/newscontent/:aid', component: NewsContent }, ], })
Beim Springen über den Router-Link sind eine Vorlagenzeichenfolge und ein Doppelpunkt + to erforderlich.
<ul> <li v-for="(item, index) in list" :key="index"> <router-link :to="`/newscontent/${index}`"> {{item}}</router-link> </li> </ul>
Rufen Sie den von der dynamischen Route übergebenen Wert über this.$route.params ab.
mounted(){ // this.$route.params 获取动态路由的传值 console.log(this.$route.params) }
Wenn wir eine Wertübertragung ähnlich wie GET implementieren möchten, können wir die folgende Methode verwenden
1 Konfigurieren Sie die Route als normale Route.
const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', component: Home , alias: '/home' }, { path: '/news', component: News }, { path: '/user', component: User }, { path: '/newscontent', component: NewsContent }, ], })
2. Router-Link-Sprünge in Form von Fragezeichen.
<router-link :to="`/newscontent?aid=${index}`"> {{item}}</router-link>
3. Holen Sie sich den Get-Wert über this.$route.query.
console.log(this.$route.query);
Programmatische Routennavigation (JS-Sprungroute)
Geben Sie es einfach über this.$router.push an.
this.$router.push({ path: '/home' })
Wenn Sie die Get-Value-Übertragung implementieren möchten, können Sie die folgende Methode verwenden.
this.$router.push({ path: '/home', query: {aid: 14} }) }
Dynamisches Routing muss die folgende Methode verwenden.
this.$router.push({ path: '/home/123', // query: {aid: 14} })
Routing-Modus
Hash-Modus
Das typische Merkmal des Hash-Modus ist, dass die Seitenroute ein Nummernzeichen enthält.
const router = createRouter({ history: createWebHashHistory(), routes: [ ..., ], })
HTML5-Verlaufsmodus
Einführung von createWebHistory.
Das History-Attribut im Konfigurationselement des Routers ist auf createWebHistory() gesetzt.
import { createRouter, createWebHistory } from 'vue-router' //配置路由 const router = createRouter({ history: createWebHistory(), routes: [ ... ], })
Hinweis: Nachdem Sie den HTML5-Verlaufsmodus aktiviert haben, müssen Sie beim Veröffentlichen auf dem Server pseudostatisch konfigurieren.
So konfigurieren Sie Pseudostatik:
https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85% 8D %E7%BD%AE%E4%BE%8B%E5%AD%90
Benannte Route
Allgemeine Situation
Konfigurieren Sie das Namensattribut beim Definieren der Route
{ path: '/news', component: News,name:"news" }
Eingehend Objekt springen
<router-link :to="{name: 'news'}">新闻</router-link>
Übergeben Sie den Wert über GET
Konfigurieren Sie das Namensattribut beim Definieren der Route
{ path: '/newscontent', component: NewsContent, name: "content" },
Übergeben Sie das Objekt einschließlich der Abfrage
<li v-for="(item, index) in list" :key="index"> <router-link :to="{name: 'content',query: {aid: index}}"> {{item}}</router-link> </li>
Durch dynamische Routing-Methode
Dynamisches Routing definieren und das Namensattribut angeben
{ path: '/userinfo/:id', name: "userinfo", component: UserInfo }
Übergeben Sie das Objekt einschließlich der Parameter
<router-link :to="{name: 'userinfo',params: {id: 123}}">跳转到用户详情</router-link>
Programmatisches Routing
ist der oben genannten Methode sehr ähnlich.
<button @click="this.$router.push({name: 'userinfo',params: {id: 666}})">点击跳转</button>
Routenumleitung
{ path: '', redirect: "/home" }, // 路由重定向 { path: '/home', component: Home },
Routen-Alias
Im folgenden Beispiel ist der Zugriff auf die Personenroute dasselbe wie der Zugriff auf die Alias-Route.
{ path: '/user', component: User, alias: '/people' }
alias kann auch ein Array sein.
{ path: '/user', component: User, alias: ['/people','/u']}
Form des dynamischen Routings.
{ path: '/userinfo/:id', name: "userinfo", component: UserInfo, alias: '/u/:id' }
Nested Routing
Das Anwendungsszenario von Nested Routing befindet sich im Allgemeinen in der Navigationsleiste. „Definieren Sie verschachtelte Routen.“ !
Das obige ist der detaillierte Inhalt vonLassen Sie uns über Routing in Vue3 sprechen und kurz die Routing-Konfigurationsmethoden analysieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Apache Camel ist ein auf Enterprise Service Bus (ESB) basierendes Integrationsframework, das problemlos unterschiedliche Anwendungen, Dienste und Datenquellen integrieren kann, um komplexe Geschäftsprozesse zu automatisieren. ApacheCamel verwendet eine routenbasierte Konfiguration, um Integrationsprozesse einfach zu definieren und zu verwalten. Zu den Hauptmerkmalen von ApacheCamel gehören: Flexibilität: ApacheCamel kann problemlos in eine Vielzahl von Anwendungen, Diensten und Datenquellen integriert werden. Es unterstützt mehrere Protokolle, einschließlich HTTP, JMS, SOAP, FTP usw. Effizienz: ApacheCamel ist sehr effizient und kann eine große Anzahl von Nachrichten verarbeiten. Es verwendet einen asynchronen Nachrichtenmechanismus, der die Leistung verbessert. Erweiterbar

So implementieren Sie API-Routing im Slim-Framework Slim ist ein leichtes PHP-Mikroframework, das eine einfache und flexible Möglichkeit zum Erstellen von Webanwendungen bietet. Eines der Hauptmerkmale ist die Implementierung des API-Routings, das es uns ermöglicht, verschiedene Anfragen den entsprechenden Handlern zuzuordnen. In diesem Artikel wird die Implementierung des API-Routings im Slim-Framework vorgestellt und einige Codebeispiele bereitgestellt. Zuerst müssen wir das Slim-Framework installieren. Die neueste Version von Slim kann über Composer installiert werden. Öffnen Sie ein Terminal und

vue3-Funktionen: 1、beforeCreate;2、created;3、beforeMount;4、mounted;5、beforeUpdate;6、updated;7、beforeDestroy;8、destroyed;9、activated;10、deactivated;11、error Captured;12 、getDerivedStateFromProps-Funktion

In modernen Webanwendungen ist die Implementierung der Webseitennavigation und -weiterleitung ein sehr wichtiger Teil. Die Verwendung von JavaScript-Funktionen zur Implementierung dieser Funktion kann unsere Webanwendungen flexibler, skalierbarer und benutzerfreundlicher machen. In diesem Artikel wird die Verwendung von JavaScript-Funktionen zum Implementieren der Webseitennavigation und -weiterleitung vorgestellt und spezifische Codebeispiele bereitgestellt. Implementieren der Webseitennavigation Bei einer Webanwendung ist die Webseitennavigation der von Benutzern am häufigsten verwendete Teil. Wenn ein Benutzer auf die Seite klickt

ThinkPHP6 ist ein leistungsstarkes PHP-Framework mit praktischen Routing-Funktionen, mit dem sich die URL-Routing-Konfiguration problemlos implementieren lässt. Gleichzeitig unterstützt ThinkPHP6 auch mehrere Routing-Modi wie GET, POST, PUT, DELETE usw. In diesem Artikel wird erläutert, wie Sie ThinkPHP6 für die Routing-Konfiguration verwenden. 1. GET-Methode im ThinkPHP6-Routing-Modus: Die GET-Methode ist eine Methode zum Abrufen von Daten und wird häufig für die Seitenanzeige verwendet. In ThinkPHP6 können Sie Folgendes verwenden

Implementierungsmethode und Erfahrungszusammenfassung der flexiblen Konfiguration von Routing-Regeln in PHP Einführung: In der Webentwicklung sind Routing-Regeln ein sehr wichtiger Teil, der die entsprechende Beziehung zwischen URL und bestimmten PHP-Skripten bestimmt. Bei der herkömmlichen Entwicklungsmethode konfigurieren wir normalerweise verschiedene URL-Regeln in der Routing-Datei und ordnen die URL dann dem entsprechenden Skriptpfad zu. Da jedoch die Komplexität des Projekts zunimmt und sich die Geschäftsanforderungen ändern, wird es sehr umständlich und unflexibel, wenn jede URL manuell konfiguriert werden muss. Also, wie man es in PHP implementiert

Wie verwende ich Routing, um Animationseffekte für den Seitenwechsel in einem Vue-Projekt anzupassen? Einführung: Im Vue-Projekt ist Routing eine der Funktionen, die wir häufig verwenden. Der Wechsel zwischen Seiten kann durch Routing erfolgen und sorgt so für eine gute Benutzererfahrung. Um den Seitenwechsel lebendiger zu gestalten, können wir dies durch Anpassen von Animationseffekten erreichen. In diesem Artikel wird erläutert, wie Sie mithilfe des Routings den Seitenwechsel-Animationseffekt im Vue-Projekt anpassen. Erstellen Sie ein Vue-Projekt. Zuerst müssen wir ein Vue-Projekt erstellen. Mit VueCLI können Sie schnell erstellen

Tipps zur Verwendung von Routen-Interceptoren in Uniapp In der Uniapp-Entwicklung sind Routen-Interceptoren eine sehr häufige Funktion. Mit Routeninterceptoren können wir vor Routensprüngen einige spezifische Vorgänge ausführen, z. B. Berechtigungsüberprüfungen, Parameter für die Seitenübergabe usw. In diesem Artikel stellen wir Tipps zur Verwendung von Route Interceptors in Uniapp vor und stellen spezifische Codebeispiele bereit. Erstellen Sie einen Routen-Interceptor. Zuerst müssen wir im Uniapp-Projekt einen Routen-Interceptor erstellen. Die Erstellungsmethode ist wie folgt: Erstellen Sie ein Inter im Projektstammverzeichnis
