Wie verwende ich Routing, um in einem Vue-Projekt zwischen Seiten zu wechseln und Parameter zu übertragen?

Wie verwende ich Routing, um in einem Vue-Projekt zwischen Seiten zu wechseln und Parameter zu übertragen?

Im Vue-Projekt können wir Vue Router verwenden, um zwischen Seiten zu wechseln und Parameter zu übertragen. Vue Router ist ein offiziell empfohlenes Plug-in zur Implementierung von Routing-Funktionen. Es kann problemlos Seitenwechsel in Single-Page-Anwendungen implementieren und unterstützt die Übergabe von Parametern.

Zuerst müssen wir das Vue Router-Plugin im Vue-Projekt installieren. Es kann über den npm-Befehl installiert werden:

npm install vue-router

Führen Sie nach der Installation Vue Router in der Eintragsdatei des Projekts (normalerweise main.js) ein und erstellen Sie eine Routing-Instanz:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Im obigen Code führen wir VueRouter über die Importanweisung ein , Und registrieren Sie das Plugin in der Vue-Instanz. Als nächstes haben wir das Routing-Konfigurationsobjekt „Routen“ definiert, das zwei Routing-Pfade und entsprechende Komponenten enthält. Beim Zugriff auf den Stammpfad „/“ wird die Home-Komponente gerendert; beim Zugriff auf „/about“ wird die About-Komponente gerendert. Schließlich erstellen wir die Routing-Instanz, indem wir VueRouter instanziieren und das Routing-Konfigurationsobjekt übergeben.

Nachdem wir die Routing-Instanz erstellt haben, können wir mit b988a8fd72e5e0e42afffd18f951b277 in der Vue-Komponente zwischen den Seiten wechseln.

b988a8fd72e5e0e42afffd18f951b277 ist eine von Vue Router bereitgestellte Komponente, die zum Generieren von Links verwendet wird. Durch Klicken auf den Link wird ein Routing-Sprung ausgelöst. Wir können b988a8fd72e5e0e42afffd18f951b277 in der Vorlage der Komponente verwenden, um zwischen Seiten zu wechseln. In der Vorlage der Home-Komponente können wir beispielsweise b988a8fd72e5e0e42afffd18f951b277 wie folgt verwenden:

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

Wenn im obigen Code auf den Link „Gehe zu About“ geklickt wird, wird zum Pfad „/about“ gesprungen .

975b587bf85a482ea10b0a28848e78a4 ist eine von Vue Router bereitgestellte Komponente, die zum Rendern von Komponenten verwendet wird, die der aktuellen Route entsprechen. Wir können 975b587bf85a482ea10b0a28848e78a4 in der Vorlage der Vue-Komponente verwenden, um die Komponente anzuzeigen, die der aktuellen Route entspricht. Beispielsweise können wir in der Vorlage der App-Komponente 975b587bf85a482ea10b0a28848e78a4 wie folgt verwenden:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

Auf diese Weise werden beim Zugriff auf den Pfad „/“ oder „/about“ die Home-Komponente und die About-Komponente angezeigt wird jeweils gerendert.

Neben dem Wechseln zwischen Seiten unterstützt Vue Router auch die Übergabe von Parametern. Beim Definieren eines Routing-Pfads können Sie Parameter angeben, indem Sie Platzhalter im Pfad verwenden. Beispielsweise können wir einen Routing-Pfad definieren, der Parameter enthält:

{
  path: '/user/:id',
  name: 'user',
  component: User
}

Im obigen Code definieren wir einen Routing-Pfad von /user/:id, wobei :id ein Parameter ist. Wenn wir auf /user/123 zugreifen, wird :id durch den tatsächlichen Wert ersetzt, zum Beispiel wird :id durch 123 ersetzt.

In der Vue-Komponente können wir die Routing-Parameter über this.$route.params abrufen. In der Benutzerkomponente können wir beispielsweise die Routing-Parameter wie folgt abrufen:

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出路由参数的值
  }
}

Der obige Code gibt die Werte der Routing-Parameter aus, nachdem die Benutzerkomponente geladen wurde.

Zusammenfassend lässt sich sagen, dass wir über das Vue Router-Plug-in problemlos zwischen Seiten wechseln und Parameter im Vue-Projekt übertragen können. Die Seitenumschaltung erfolgt über b988a8fd72e5e0e42afffd18f951b277 und die Parameter werden durch die Definition des Routing-Pfads übergeben. Die Verwendung von Vue Router kann die Wartbarkeit und Skalierbarkeit des Projekts verbessern und den Seitenwechsel und die Parameterübertragung flexibler und bequemer machen.

Das obige ist der detaillierte Inhalt vonWie verwende ich Routing, um in einem Vue-Projekt zwischen Seiten zu wechseln und Parameter zu übertragen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!