VUE3-Eintragsentwicklung: Verwenden Sie Vue-Router, um einen Seitensprung zu erreichen

Vue 3 ist eines der beliebtesten JavaScript-Frameworks zum Erstellen interaktiver Benutzeroberflächen. Vue-Router ist ein Plug-in für das Vue-Framework, das zur Implementierung des Routing-Managements in Single-Page-Anwendungen verwendet wird. In diesem Artikel stellen wir vor, wie Sie mit Vue-Router Seitensprünge in Vue 3 implementieren.

1. Installieren und konfigurieren Sie Vue-Router

Bevor Sie beginnen, stellen Sie sicher, dass Sie Vue 3 installiert haben. Wenn es noch nicht installiert wurde, können Sie zur Installation auf die offizielle Dokumentation zurückgreifen: https://v3.cn.vuejs.org/guide/installation.html.

Installieren Sie Vue-Router:

Führen Sie im Terminal den folgenden Befehl zur Installation aus:

npm install vue-router@4.0.0-alpha.13

In Vue 3 sollte die Version von Vue-Router nicht niedriger als 4.0.0-alpha.13 sein.

Nach der Installation von Vue-Router müssen wir Vue-Router in der Vue 3-Anwendung konfigurieren. Erstellen Sie eine Routes.js-Datei:

import Home from '@/components/Home'
import About from '@/components/About'

export default [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

In dieser Datei definieren wir zwei Routen, eine ist die Startseite (Home) und die andere ist die Seite „Über uns“ (About).

Wir müssen außerdem Vue-Router in die Eintragsdatei (main.js) der Vue 3-Anwendung importieren und konfigurieren:

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

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

const app = createApp(App)

app.use(router)

app.mount('#app')

In dieser Datei erstellen wir eine Router-Instanz über die Funktion „createRouter“ und verwenden dazu die Funktion „createWebHistory“. Erstellen Sie den Modus des Routers. Wir übergeben auch Routen an die Router-Instanz.

In Vue 3 verwenden wir die Methode app.use(), um das Vue-Router-Plugin in der Vue-Anwendung zu installieren. Platzieren Sie abschließend die Methode app.mount() nach der Methode app.use(). Dadurch wird sichergestellt, dass Vue-Router korrekt installiert wurde und die Anwendung normal ausgeführt werden kann.

2. Seitensprung implementieren

Nachdem wir Vue-Router erfolgreich installiert und konfiguriert haben, werden wir Vue-Router verwenden, um den Seitensprung zu implementieren.

1. Fügen Sie einen Routing-Link in der App.vue-Datei hinzu:

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

In dieser Vorlage verwenden wir die -Komponente, um einen Routing-Link zu erstellen, wobei wir das to-Attribut als Routing-Pfad angeben.

2. Inhalt in Home.vue und About.vue hinzufügen

Wir haben zwei Vue-Komponenten für die Home- und About-Seiten erstellt. Wir müssen den Vorlagen dieser Komponenten einige Inhalte hinzufügen, um zu überprüfen, ob die Seite normal springt.

Home.vue:

<template>
  <div>
    <h2>Home</h2>
    <p>Welcome to the home page</p>
  </div>
</template>

About.vue:

<template>
  <div>
    <h2>About</h2>
    <p>Welcome to the about page</p>
  </div>
</template>

Jetzt haben wir den Routenlink und den Seiteninhalt erfolgreich eingerichtet. Über diese Links können wir zu Seiten springen.

3. Zusammenfassung

In diesem Artikel haben wir gelernt, wie man mit Vue-Router Seitensprünge in Vue 3 implementiert. Zuerst installieren und konfigurieren wir Vue-Router. Anschließend erstellen wir den Routenlink mit der Komponente Schließlich fügen wir der Komponentenvorlage Inhalte hinzu, um zu überprüfen, ob die Seite erfolgreich gesprungen ist.

Vue-Router verfügt über viele weitere Funktionen, wie z. B. dynamisches Routing, verschachteltes Routing, Route Guards und mehr. Wenn Sie diese Funktionen beherrschen, können Sie komplexe Einzelseitenanwendungen erstellen und Sprünge und Navigation in Ihren Anwendungen verwenden.

Das obige ist der detaillierte Inhalt vonVUE3-Eintragsentwicklung: Verwenden Sie Vue-Router, um einen Seitensprung zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!