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 src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
  <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: &#39;news&#39;}">新闻</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: &#39;content&#39;,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: &#39;userinfo&#39;,params: {id: 123}}">跳转到用户详情</router-link>

Programmatisches Routing

ist der oben genannten Methode sehr ähnlich.

<button @click="this.$router.push({name: &#39;userinfo&#39;,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!