Wie man in Vue zwischen zwei Routen springt (eine kurze Analyse der Methode)

Vue ist ein sehr beliebtes JavaScript-Framework, mit dem wir die Entwicklungseffizienz durch die Erstellung komponentenbasierter Webanwendungen verbessern können. Das Routing-System von Vue.js ermöglicht uns die Navigation zwischen verschiedenen Seiten. In diesem Artikel wird erläutert, wie man zwischen zwei Vue-Routen wechselt.

Vues Routing wird über das Vue-Router-Plug-in vervollständigt. Das Vue-Router-Plugin stellt eine Router-Instanz bereit, mit der wir die Routen unserer Anwendung definieren und verwalten können. Um den Vue-Router verwenden zu können, müssen wir ihn in die Vue-Anwendung einführen.

Routen definieren

Definieren Sie zunächst Routen in Ihrer Vue-Anwendung. Die Möglichkeit, Routen zu definieren, besteht darin, die Routenzuordnung des Vue Routers zu definieren. Es gibt die Zuordnung zwischen URL-Pfaden und Vue-Komponenten an. Die Routenzuordnung kann über das Routenattribut der Vue-Router-Instanz definiert werden.

Erstellen Sie beispielsweise eine Vue-Komponente mit dem Namen „Home“:

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

Dann können wir eine Route in der Routing-Karte definieren, um den Homepage-Pfad auf die Home-Komponente zu verweisen:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

Im obigen Code verwenden wir zuerst den Import Anweisung zum Importieren der Vue- und Vue-Router-Bibliothek und der Home-Komponente. Als nächstes registrieren Sie den Vue-Router über den Vue.use()-Aufruf in der Vue-Anwendung. Definieren Sie dann eine Route Map-Routen, die ein Pfadelement zum Definieren des URL-Pfads und ein Komponentenelement zum Angeben der Vue-Komponente des entsprechenden Pfads enthält. Schließlich erstellen wir eine Router-Instanz und übergeben sie an die Vue-Instanz.

Routensprünge verwenden

Da wir nun eine Routenkarte erstellt und eine Route definiert haben, geht es im nächsten Schritt darum, wie man Routensprünge durchführt. Vue Router bietet zwei Arten von Sprüngen: deklarative Navigation und programmatische Navigation.

Deklarative Navigation

Deklarative Navigation bezieht sich auf die Verwendung der -Komponente in der Vue-Komponente, um zu einer anderen Route zu springen. Verwenden Sie beispielsweise das Tag in der Home-Komponente, um zur About-Komponente zu springen:

<template>
  <div>
    <h1>Home Page</h1>
    <router-link to="/about">About Page</router-link>
  </div>
</template>

Hier verwenden wir das to-Attribut, um den Pfad der Sprungzielroute anzugeben. Vue löst das to-Attribut als vollständigen Pfad zu einer anderen Route auf.

Programmatische Navigation

Programmatische Navigation verwendet die $router-Methode in der Vue-Router-Instanz, um zwischen Routen zu springen. In der Home-Komponente können wir beispielsweise die Methode $router.push verwenden, um zur About-Komponente zu springen:

<template>
  <div>
    <h1>Home Page</h1>
    <button @click="gotoAbout">About Page</button>
  </div>
</template>

<script>
export default {
  methods: {
    gotoAbout () {
      this.$router.push('/about')
    }
  }
}
</script>

Hier definieren wir eine gotoAbout-Methode, in der die Methode $router.push verwendet wird, um zur Route zu springen die Zielroute.

Zusammenfassung

Durch die beiden oben genannten Methoden können wir den Sprung zwischen zwei Vue-Routen realisieren. Deklarative Navigation und programmatische Navigation sind beide häufig verwendete Routing-Jump-Methoden in Vue Router. In der tatsächlichen Entwicklung können wir je nach Szenario unterschiedliche Methoden auswählen.

Das obige ist der detaillierte Inhalt vonWie man in Vue zwischen zwei Routen springt (eine kurze Analyse der Methode). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!