Inhaltsverzeichnis
Grundlegende Konfiguration des Routings
Konfiguration des dynamischen Routings
Programmatische Routennavigation (JS-Sprungroute)
Routing-Modus
Hash-Modus
HTML5-Verlaufsmodus
Benannte Route
Allgemeine Situation
Übergeben Sie den Wert über GET
Durch dynamische Routing-Methode
Programmatisches Routing
Routenumleitung
Routen-Alias
Nested Routing
Heim Web-Frontend View.js Lassen Sie uns über Routing in Vue3 sprechen und kurz die Routing-Konfigurationsmethoden analysieren

Lassen Sie uns über Routing in Vue3 sprechen und kurz die Routing-Konfigurationsmethoden analysieren

Dec 21, 2021 am 10:35 AM
vue3 路由 路由配置

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.

Lassen Sie uns über Routing in Vue3 sprechen und kurz die Routing-Konfigurationsmethoden analysieren

【Verwandte Empfehlung: „vue.js-Tutorial

Grundlegende Konfiguration des Routings

1. Installieren Sie das Plug-in

npm install vue-router@next --save
Nach dem Login kopieren

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;
Nach dem Login kopieren

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');
Nach dem Login kopieren

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>
Nach dem Login kopieren

, 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: &#39;/&#39;, component: Home , alias: &#39;/home&#39; },
        { path: &#39;/news&#39;, component: News },
        { path: &#39;/user&#39;, component: User },
        { path: &#39;/newscontent/:aid&#39;, component: NewsContent },
    ], 
})
Nach dem Login kopieren

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>
Nach dem Login kopieren

Rufen Sie den von der dynamischen Route übergebenen Wert über this.$route.params ab.

mounted(){
    // this.$route.params 获取动态路由的传值
    console.log(this.$route.params)
}
Nach dem Login kopieren

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: &#39;/&#39;, component: Home , alias: &#39;/home&#39; },
        { path: &#39;/news&#39;, component: News },
        { path: &#39;/user&#39;, component: User },
        { path: &#39;/newscontent&#39;, component: NewsContent },
    ], 
})
Nach dem Login kopieren

2. Router-Link-Sprünge in Form von Fragezeichen.

<router-link  :to="`/newscontent?aid=${index}`"> {{item}}</router-link>
Nach dem Login kopieren

3. Holen Sie sich den Get-Wert über this.$route.query.

console.log(this.$route.query);
Nach dem Login kopieren

Programmatische Routennavigation (JS-Sprungroute)

Geben Sie es einfach über this.$router.push an.

  this.$router.push({
    path: &#39;/home&#39;
  })
Nach dem Login kopieren

Wenn Sie die Get-Value-Übertragung implementieren möchten, können Sie die folgende Methode verwenden.

this.$router.push({
    path: &#39;/home&#39;,
    query: {aid: 14}
  })
}
Nach dem Login kopieren

Dynamisches Routing muss die folgende Methode verwenden.

  this.$router.push({
    path: &#39;/home/123&#39;,
    // query: {aid: 14}
  })
Nach dem Login kopieren

Routing-Modus

Hash-Modus

Das typische Merkmal des Hash-Modus ist, dass die Seitenroute ein Nummernzeichen enthält.

const router = createRouter({

    history: createWebHashHistory(),
    routes: [
        ...,
    ], 
})
Nach dem Login kopieren

HTML5-Verlaufsmodus

  • Einführung von createWebHistory.

  • Das History-Attribut im Konfigurationselement des Routers ist auf createWebHistory() gesetzt.

import { createRouter, createWebHistory } from &#39;vue-router&#39;

//配置路由
const router = createRouter({
    history: createWebHistory(),
    routes: [
        ...
    ], 
})
Nach dem Login kopieren

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: &#39;/news&#39;, component: News,name:"news" }
Nach dem Login kopieren
  • Eingehend Objekt springen

<router-link :to="{name: &#39;news&#39;}">新闻</router-link>
Nach dem Login kopieren

Übergeben Sie den Wert über GET

  • Konfigurieren Sie das Namensattribut beim Definieren der Route

{ path: &#39;/newscontent&#39;, component: NewsContent, name: "content" },
Nach dem Login kopieren
  • Übergeben Sie das Objekt einschließlich der Abfrage

<li v-for="(item, index) in list" :key="index">
    <router-link  :to="{name: &#39;content&#39;,query: {aid: index}}"> {{item}}</router-link>
</li>
Nach dem Login kopieren

Durch dynamische Routing-Methode

  • Dynamisches Routing definieren und das Namensattribut angeben

{ path: &#39;/userinfo/:id&#39;, name: "userinfo", component: UserInfo }
Nach dem Login kopieren
  • Übergeben Sie das Objekt einschließlich der Parameter

<router-link :to="{name: &#39;userinfo&#39;,params: {id: 123}}">跳转到用户详情</router-link>
Nach dem Login kopieren

Programmatisches Routing

ist der oben genannten Methode sehr ähnlich.

<button @click="this.$router.push({name: &#39;userinfo&#39;,params: {id: 666}})">点击跳转</button>
Nach dem Login kopieren

Routenumleitung

{ path: &#39;&#39;, redirect: "/home" },   // 路由重定向
{ path: &#39;/home&#39;, component: Home },
Nach dem Login kopieren

Routen-Alias

Im folgenden Beispiel ist der Zugriff auf die Personenroute dasselbe wie der Zugriff auf die Alias-Route.

{ path: &#39;/user&#39;, component: User, alias: &#39;/people&#39; }
Nach dem Login kopieren

alias kann auch ein Array sein.

{ path: &#39;/user&#39;, component: User, alias: [&#39;/people&#39;,&#39;/u&#39;]}
Nach dem Login kopieren

Form des dynamischen Routings.

{ path: &#39;/userinfo/:id&#39;, name: "userinfo", component: UserInfo, alias: &#39;/u/:id&#39; }
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Java Apache Camel: Aufbau einer flexiblen und effizienten serviceorientierten Architektur Java Apache Camel: Aufbau einer flexiblen und effizienten serviceorientierten Architektur Feb 19, 2024 pm 04:12 PM

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 So implementieren Sie API-Routing im Slim-Framework Aug 02, 2023 pm 05:13 PM

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

Was sind die Lebenszyklen von vue3? Was sind die Lebenszyklen von vue3? Feb 01, 2024 pm 04:33 PM

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

Verwenden Sie JavaScript-Funktionen, um die Navigation und Weiterleitung von Webseiten zu implementieren Verwenden Sie JavaScript-Funktionen, um die Navigation und Weiterleitung von Webseiten zu implementieren Nov 04, 2023 am 09:46 AM

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

So verwenden Sie Routing in ThinkPHP6 So verwenden Sie Routing in ThinkPHP6 Jun 20, 2023 pm 07:54 PM

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 zur flexiblen Konfiguration von Routing-Regeln in PHP Implementierungsmethode und Erfahrungszusammenfassung zur flexiblen Konfiguration von Routing-Regeln in PHP Oct 15, 2023 pm 03:43 PM

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? Wie verwende ich Routing, um Animationseffekte für den Seitenwechsel in einem Vue-Projekt anzupassen? Jul 21, 2023 pm 02:37 PM

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 Route Interceptors in Uniapp Tipps zur Verwendung von Route Interceptors in Uniapp Dec 17, 2023 pm 04:30 PM

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

See all articles