Wie implementiert man einen Front-End-Routing-Sprung unter Vue?

Vue ist ein hervorragendes Front-End-Framework. In der Anwendungsentwicklung ist der Front-End-Route-Jump eine sehr häufige Anforderung. Vue bietet umfangreiche Funktionen zur Implementierung von Routing-Sprüngen. In diesem Artikel werden die integrierte Routing-Implementierung von Vue und die Verwendung der Routing-Bibliothek Vue-Router eines Drittanbieters vorgestellt.

1. Implementierung des integrierten Vue-Routings

In Vue können Sie den integrierten Vue-Router verwenden, um Front-End-Routing-Sprünge zu implementieren.

1. Vue-Router installieren

Verwenden Sie den Befehl npm, um die Vue-Router-Bibliothek zu installieren:

npm install vue-router

2. Vue-Router-Objekt erstellen

Vue-Router-Objekt in der Hauptdatei des Vue-Projekts erstellen (z. B. main.js) und Binden Sie es in die Vue-Instanz. Wie unten gezeigt:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  // 路由配置
})
new Vue({
  router
}).$mount('#app')

Im Code führen wir zunächst den Vue-Router ein und binden ihn an die Vue-Instanz. Anschließend wird ein Vue-Router-Objekt erstellt und in der Vue-Instanz platziert.

3. Routing-Konfiguration

Beim Erstellen eines Vue-Router-Objekts müssen Sie das Routing konfigurieren. Die Konfiguration im Vue Router umfasst hauptsächlich Routing-Pfade, Routing-Komponenten, Routing-Aliase und alle anderen Parameter. Der Routing-Pfad entspricht dem Pfadteil in der URL, und die Routing-Komponente definiert die Komponenten, die unter dem Pfad angezeigt werden sollen.

Wenn wir beispielsweise eine Route für eine Seite erstellen möchten, können wir diese beim Konfigurieren der Route so schreiben:

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    }
  ]
})

Unter diesen ist der Routing-Pfad „/about“ und die entsprechende Komponente ist About.

4. Route Jump

Mit der Routing-Konfiguration können wir die integrierte Route Jump-Funktion von Vue Router verwenden. Vue Router stellt das Router-Link-Tag und die Methode router.push zur Implementierung von Routensprüngen bereit.

1) Verwenden Sie das Router-Link-Tag

Sie können das Router-Link-Tag in HTML-Vorlagen verwenden, um einen Routing-Link zu erstellen. Das Router-Link-Tag generiert automatisch die richtige URL basierend auf der Routing-Konfiguration.

Zum Beispiel:

<router-link to="/about">关于我们</router-link>

Wenn Sie auf den Link „Über uns“ klicken, wird zur Komponentenseite gesprungen, die dem konfigurierten Routing-Pfad „/about“ entspricht.

2) Verwenden Sie die router.push-Methode

Zusätzlich zur Verwendung des Router-Link-Tags bietet Vue Router auch die router.push-Methode zum Implementieren von Routensprüngen.

Zum Beispiel:

this.$router.push('/about')

In der Vue-Komponente können wir diesen.$router verwenden, um die Vue-Router-Instanz abzurufen, und die Push-Methode verwenden, um den Sprung zu implementieren. Dieser Code springt mit dem Routing-Pfad „/about“ zur Komponentenseite.

2. Vue-Router

Vue-Router ist ein offizieller Router, der auf Vue.js basiert. Es handelt sich um den offiziell von Vue.js veröffentlichten Routing-Manager, der leistungsstarke Funktionen wie Routing-Verschachtelung, dynamisches Routing, verzögertes Laden von Routen usw. bietet. Schauen wir uns an, wie Sie mit Vue-Router Front-End-Routing-Sprünge implementieren.

1. Installieren Sie Vue-Router

Bevor Sie Vue-Router verwenden, müssen Sie es zuerst im Projekt installieren. Wir können es mit dem Befehl npm installieren.

npm install vue-router --save

2. Routing-Instanz erstellen

Beim Erstellen einer Vue-Route können wir zunächst die relevanten Routing-Informationen der Seitenkomponenten (einschließlich verschachtelter Unterkomponenten) konfigurieren, die in ein Array gesprungen werden müssen.

Zum Beispiel:

const routes = [
    {
        path: '/',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
    {
        path: '/user/:id',
        component: User
    }
]

Dieses Array definiert drei Routing-Informationen. Die erste Routing-Information definiert die Standard-Jump-Seite als „Home“, die zweite Routing-Information definiert die Jump-Seite als „Info“ und die dritte Routing-Information definiert die Jump-Seite als „Benutzer“. und die Routing-Informationen müssen den ID-Parameter übergeben.

Als nächstes können wir eine Routing-Instanz über die createRouter-Methode von Vue-Router erstellen.

Zum Beispiel:

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
    history: createWebHistory(),
    routes
})

Im Code verwenden wir die createRouter-Methode von Vue-Router, um eine Routing-Instanz zu erstellen und die Routing-Verlaufsverwaltungsmethode und Routing-Informationen zu definieren. Unter anderem bedeutet createWebHistory die Verwendung der HTML5-Verlaufs-API für die Routing-Verwaltung.

3. Routing registrieren

Nachdem wir die Routing-Instanz erstellt haben, müssen wir die Routing-Instanz in der Vue-Anwendungsinstanz registrieren.

Zum Beispiel:

import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'
createApp(App)
.use(router)
.mount('#app')

Im Code registrieren wir die Routing-Instanz über die Verwendungsmethode von createApp in der Vue-Anwendungsinstanz.

Neben der Registrierung von Routing-Instanzen können wir auch Routing-Sprünge über die von Vue-Router bereitgestellte Routing-Navigationskomponente Router-View und Routing-Link-Komponente Router-Link implementieren.

Zum Beispiel:

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link :to="{name: 'user', params: {id: userId}}">User</router-link>
<router-view></router-view>

Im Code verwenden wir das Router-Link-Tag, um drei Sprunglinks zu erstellen, und verwenden das Router-View-Tag, um den entsprechenden Inhalt der Routing-Komponente anzuzeigen. Der dritte Link muss eine dynamische Parameter-ID übergeben.

4. Route Jump

Vue-Router bietet verschiedene Möglichkeiten, Route Jump zu implementieren, wie zum Beispiel:

• Verwenden Sie die Router-Link-Komponente;
• Verwenden Sie diese.$router.push()-Methode in der Vue-Komponente;
• Verwenden Sie die Methode this.$router.replace() in der Vue-Komponente.
• Verwenden Sie die Methode this.$route.go() in der Vue-Komponente.
• Verwenden Sie beispielsweise die Methode router.push in der Vue-Komponente, um einen Routing-Sprung zu implementieren:

import { reactive } from 'vue'
export default {
    setup() {
        const state = reactive({
            userId: ''
        })
        const handleRoute = function() {
            router.push({
                name: 'user',
                params: { id: state.userId }
            })
        }
        return {
            state,
            handleRoute
        }
    }
}

Im Code verwenden wir reaktiv, um ein Objekt in der Vue-Komponente zu erstellen, und verwenden dann die Methode router.push in der handleRoute-Methode. Unter diesen entspricht das Namensfeld dem Router-Link oder dem Namensattribut der Routing-Informationen, und params ist ein Objekt, das die für das Routing erforderlichen dynamischen Parameter enthält.

Fazit

Vue-Router ist ein sehr leistungsstarker und benutzerfreundlicher Routing-Manager. In einer Vue-Anwendung können mit Vue-Router Routensprünge und die für Routensprünge erforderliche Parameterübergabe einfach implementiert werden. Für Entwickler wird das Schreiben von Single-Page-Anwendungen dadurch sehr einfach und effizient.

Das obige ist der detaillierte Inhalt vonWie implementiert man einen Front-End-Routing-Sprung unter Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!