Mehrere Möglichkeiten, in das Vue-Routing einzusteigen

In Vue.js ist Routing ein sehr wichtiges Konzept. Es ermöglicht uns, unterschiedliche Inhalte basierend auf unterschiedlichen URL-Adressen anzuzeigen. In Vue.js können wir über Routing-Adressen auf verschiedene Komponenten oder Seiten zugreifen. In diesem Artikel stellen wir verschiedene Möglichkeiten zum Routen von Sprüngen in Vue.js vor.

1. Verwenden Sie die Router-Link-Komponente, um Routing-Sprung zu implementieren.

Router-Link ist die integrierte Routing-Sprung-Komponente von Vue.js. Es stellt ein -Tag für den Zugriff auf verschiedene Links bereit und übergibt die URL-Adresse an die Router-View-Komponente, um die entsprechende Seite anzuzeigen. Wir können die Router-Link-Komponente in der Vorlage verwenden, um zwischen Seiten zu springen.

Das Folgende ist ein Beispielcode, der die Router-Link-Komponente verwendet, um zu anderen Seiten zu springen:

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

Im obigen Code verwenden wir zwei Router-Link-Komponenten. Das to-Attribut wird verwendet, um die Routing-Adresse des Sprungs anzugeben. To="/about" bedeutet beispielsweise, zur Seite „Über uns“ zu springen. Wenn wir auf das -Tag klicken, gleicht Vue.js die Routing-Adresse ab und zeigt die entsprechende Komponente basierend auf dem Wert des to-Attributs an.

2. Verwenden Sie die programmgesteuerte Navigation in Vue.js, um Routensprünge zu implementieren.

Zusätzlich zur Verwendung der Router-Link-Komponente für Routensprünge bietet Vue.js auch eine programmgesteuerte Navigationsmethode für Routensprünge. Die programmatische Navigation implementiert Routing-Sprünge durch JavaScript-Code, wodurch wir direkt zu bestimmten Seiten im Code springen können.

Das Folgende ist ein Beispielcode für die Implementierung von Routensprüngen mithilfe der programmatischen Navigation in Vue.js:

<template>
  <div>
    <button @click="goHome">首页</button>
    <button @click="goAbout">关于我们</button>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goAbout() {
      this.$router.push('/about');
    }
  }
}
</script>

Im obigen Code verwenden wir zwei Schaltflächen, um Routensprünge zu implementieren. Wenn wir auf die Schaltfläche klicken, rufen wir die Methode goHome oder goAbout auf, um den Routensprung zu implementieren. In Vue.js können wir über this.$router auf das Routing-Objekt zugreifen und die Methode push() aufrufen, um den Routensprung zu implementieren. Wenn wir die Methode push() aufrufen und die Ziel-Routing-Adresse übergeben, gleicht Vue.js automatisch die Routing-Adresse ab und zeigt die entsprechende Komponente an.

3. Verwenden Sie die Methode router.push(), um den Routensprung zu implementieren

Zusätzlich zur Verwendung der Methode $this.$router.push() zum Implementieren des Routensprungs bietet Vue.js auch eine router.push()-Methode Möglichkeit, Routing-Sprünge durchzuführen. Im Vergleich zur Methode $this.$router.push() ist die Methode router.push() direkter und ermöglicht uns eine feinere Steuerung des Routing-Sprungverhaltens.

Das Folgende ist ein Beispielcode, der die Methode router.push() verwendet, um einen Routensprung zu implementieren:

<template>
  <div>
    <button @click="goHome">首页</button>
    <button @click="goAbout">关于我们</button>
  </div>
</template>

<script>
import { Router } from 'vue-router';

export default {
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goAbout() {
      const route = { path: '/about', name: 'About' };
      this.$router.push(route);
    }
  }
}
</script>

Im obigen Code verwenden wir die Methode router.push(), um den Sprung zu implementieren. Wir können eine Zeichenfolge oder ein Objekt übergeben, um die Ziel-Routing-Adresse anzugeben. Im obigen Beispiel haben wir ein Objekt übergeben, das die Routing-Adresse und den Namen unserer Seite angibt.