Vue3+TS+Vite-Entwicklungsfähigkeiten: So verwenden Sie Vue Router für das Routing-Management

Vue3+TS+Vite-Entwicklungsfähigkeiten: So verwenden Sie Vue Router für das Routing-Management

In den letzten Jahren erfreut sich das Vue-Framework bei Entwicklern im Bereich der Front-End-Entwicklung immer größerer Beliebtheit. Im Vue-Ökosystem kann uns Vue Router als modernes Routing-Management-Tool dabei helfen, Single-Page-Anwendungen mit einer guten Benutzererfahrung zu erstellen. In diesem Artikel werden die Entwicklungsfähigkeiten der Verwendung von Vue Router mit Vue3 und TypeScript für die Routing-Verwaltung vermittelt.

1. Vue Router installieren und initialisieren

Zuerst müssen wir Vue Router mit dem Befehl npm oder Yarn installieren. Öffnen Sie das Terminal und führen Sie den folgenden Befehl aus:

npm install vue-router@next

Dann müssen wir in der Eintragsdatei (main.ts oder main.js) des Vue3-Projekts den Vue-Router einführen und ihn mit der Vue-Anwendung verknüpfen. Der Beispielcode lautet wie folgt:

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
  // 其他路由配置
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

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

Im obigen Beispielcode haben wir zunächst eine Vue Router-Instanz über die Funktion createRouter erstellt und den Routing-Verlaufsmodus und die Routing-Tabelle konfiguriert. Anschließend wird über die Funktion „createApp“ eine Vue-Anwendungsinstanz erstellt und die erstellte Vue-Router-Instanz wird über die Methode „use“ in der Vue-Anwendung registriert.

2. Routen und Komponenten definieren

Im vorherigen Schritt haben wir eine grundlegende Routing-Tabelle konfiguriert. In diesem Beispiel haben wir nur eine Route mit dem Namen Home hinzugefügt und ihre entsprechende Komponente auf die Home-Komponente festgelegt. Als nächstes müssen wir diese Komponente erstellen.

Erstellen Sie im Verzeichnis src/views eine Datei mit dem Namen Home.vue und bearbeiten Sie den Dateiinhalt wie folgt:

<template>
  <div>
    <h1>首页</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: "Home"
})
</script>

<style scoped>
</style>

In diesem Beispielcode verwenden wir die neue Funktion von Vue – Composition API. Definieren Sie eine Komponente über die Funktion defineComponent und exportieren Sie diese Komponente. In dieser Komponente rendern wir einfach ein div-Element, das den Titel „Home“ enthält.

3. Navigation und Routensprung

Basierend auf den ersten beiden Schritten konnten wir erfolgreich eine grundlegende Vue-Router-Anwendung erstellen. Als Nächstes stellen wir einige verwandte Methoden und Techniken für Navigations- und Routing-Sprünge vor, die von Vue Router bereitgestellt werden.

1. Verwenden Sie die -Komponente für die Navigation

Vue Router bietet eine praktische Komponente In der Vorlage müssen wir nur verwenden und das to-Attribut festlegen, um den Routing-Pfad anzugeben, der übersprungen werden muss.

Der Beispielcode lautet wie folgt:

<template>
  <div>
    <h1>首页</h1>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

In diesem Beispiel haben wir eine -Komponente hinzugefügt, um zum Pfad „/about“ zu springen.

2. Verwenden Sie die Methode router.push() für die programmgesteuerte Navigation.

Zusätzlich zur Verwendung der -Komponente in der Vorlage für die Navigation bietet Vue Router auch eine Methode für die programmgesteuerte Navigation. Wir können die Methode router.push() im Komponentenskript verwenden, um Routing-Sprünge durchzuführen.

Der Beispielcode lautet wie folgt:

import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: "Home",
  methods: {
    goToAbout() {
      const router = useRouter()
      router.push('/about')
    }
  }
})

In diesem Beispiel definieren wir eine goToAbout-Methode, verwenden die useRouter-Funktion innerhalb der Methode, um die aktuelle Vue-Router-Instanz abzurufen, und führen Routing-Sprünge über router.push('/about' durch. ).

4. Dynamisches Routing und Routing-Parameter

Vue Router unterstützt auch dynamisches Routing und Routing-Parameter. Durch die Konfiguration von Platzhaltern im Routing-Pfad können wir einen Routing-Pfad mit dynamischen Parametern erstellen und die Werte der Routing-Parameter über das Objekt $route.params abrufen.

Der Beispielcode lautet wie folgt:

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
  // 其他路由配置
]

const User = defineComponent({
  name: "User",
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  created() {
    console.log(this.id) // 输出路由参数id的值
  }
})

Im obigen Beispiel definieren wir einen Routing-Pfad /user/:id, der dynamische Parameter enthält, und empfangen und überprüfen den Wert der Routing-Parameter über das props-Attribut. In der erstellten Lebenszyklus-Hook-Funktion der Benutzerkomponente können wir den Wert der Routing-Parameter-ID über console.log(this.id) ausgeben.

5. Routenschutz

In tatsächlichen Projekten müssen wir vor dem Weiterleiten häufig einige zusätzliche Logikverarbeitungen durchführen, z. B. die Überprüfung der Benutzeranmeldung, die Kontrolle der Seitenberechtigungen usw. Vue Router bietet Routenwächter, um diese Anforderungen zu erfüllen.

Die drei am häufigsten verwendeten Routing-Guards von Vue Router sind beforeEach, beforeEnter und beforeLeave. Sie werden jeweils vor dem Routensprung, vor dem Betreten einer bestimmten Route und vor dem Verlassen einer bestimmten Route ausgelöst.

Der Beispielcode lautet wie folgt:

router.beforeEach((to, from, next) => {
  // 逻辑处理
  next()
})

router.beforeEnter((to, from, next) => {
  // 逻辑处理
  next()
})

router.beforeLeave((to, from, next) => {
  // 逻辑处理
  next()
})

Im obigen Beispiel registrieren wir den globalen Routing-Schutz über die entsprechende Methode des Router-Objekts und führen eine zusätzliche Logikverarbeitung in der Rückruffunktion durch. Setzen Sie nach der Verarbeitung der Logik den Routing-Sprung fort, indem Sie die Methode next() aufrufen.

6. Zusammenfassung

Vue Router ist ein wichtiger Teil des Vue-Ökosystems und seine Anwendung in der Vue3+TS+Vite-Entwicklungsumgebung ist einfacher und flexibler geworden. In diesem Artikel werden einige wichtige Tipps zur Verwendung von Vue Router für die Routenverwaltung gegeben, einschließlich der Installation und Initialisierung von Vue Router, der Definition von Routen und Komponenten, Navigation und Routensprüngen, dynamischen Routen und Routenparametern sowie Routenwächtern.

Durch die Beherrschung dieser Fähigkeiten können wir Vue Router besser nutzen, um Single-Page-Anwendungen mit guter Benutzererfahrung zu erstellen und eine größere Rolle bei der Front-End-Entwicklung zu spielen. Ich hoffe, dass dieser Artikel den Lesern Hilfe und Anleitung bei der Verwendung von Vue Router für die Routing-Verwaltung im Vue3+TS+Vite-Projekt bieten kann.

Das obige ist der detaillierte Inhalt vonVue3+TS+Vite-Entwicklungsfähigkeiten: So verwenden Sie Vue Router für das Routing-Management. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!