Heim > Web-Frontend > Front-End-Fragen und Antworten > Ausführliche Erläuterung der Installation und Verwendung von Routing in Vue

Ausführliche Erläuterung der Installation und Verwendung von Routing in Vue

PHPz
Freigeben: 2023-04-11 15:37:29
Original
1011 Leute haben es durchsucht

Vue ist ein beliebtes Front-End-Entwicklungsframework, das viele Tools und Funktionen bereitstellt, die die Entwicklung erleichtern. Unter anderem kann uns das Vue-Routing dabei helfen, Single-Page-Anwendungen zu erstellen und Routing-Funktionen zu implementieren. In diesem Artikel wird die Verwendung von Vue-Routing vorgestellt.

Vue-Routing-Installation

Bevor wir mit der Verwendung von Vue-Routing beginnen, müssen wir zuerst Vue Router installieren. Es kann über npm installiert werden:

npm install vue-router
Nach dem Login kopieren

Vue Router verwenden

In der Eintragsdatei main.js des Vue-Projekts müssen wir einige Konfigurationen vornehmen, um Vue-Routing zu verwenden.

Zuerst müssen wir Vue und Vue Router importieren:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
Nach dem Login kopieren

Dann müssen wir Routen definieren. Dies kann in einer separaten js-Datei erfolgen. Hier definieren wir beispielsweise die Route in Routen.js:

import Foo from './components/Foo.vue'
import Bar from './components/Bar.vue'

export default [
  {
    path: '/',
    component: Foo
  },
  {
    path: '/bar',
    component: Bar
  }
]
Nach dem Login kopieren

In Routen.js importieren wir zuerst die Komponenten, die wir verwenden müssen, und definieren sie dann ein Array, das zwei Routing-Objekte enthält. Jedes Routenobjekt enthält einen Pfad und Komponentenfelder.

Als nächstes müssen wir in main.js eine VueRouter-Instanz erstellen und diese an die Vue-Instanz übergeben:

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
  routes // 简写
})

new Vue({
  router
}).$mount('#app')
Nach dem Login kopieren

Als nächstes fügen wir Routing wird in Vue-Komponenten verwendet hinzu. Beispielsweise können wir Routen in <router-link> verwenden, um auf andere Routen zu verlinken: <router-link>中使用路由链接到其他路由:

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/bar">Go to Bar</router-link>
  </div>
</template>
Nach dem Login kopieren

在这里,我们使用 <router-link>

this.$router.push('/bar')
Nach dem Login kopieren
Hier verwenden wir <router-link> erstellt einen Routenlink, der zur angegebenen Route springt, wenn der Benutzer auf den Link klickt. Das to-Attribut definiert die Zielroute des Links.

Darüber hinaus können wir auch die von Vue Router bereitgestellte programmatische Navigationsfunktion verwenden, um Seitensprünge zu erzielen:

this.$router.push({ name: 'User', params: { userId: 1 }})
Nach dem Login kopieren
Beim Springen können wir auch einige Parameter übergeben: #🎜🎜 #rrreee

Hier verwenden wir die Methode $router.push und übergeben ein Objekt als Parameter, wobei das Namensfeld den Namen der Zielroute angibt und das Parameterfeld einige Parameter übergibt.

Zusammenfassung

Vue Router ist eine der sehr wichtigen Komponenten im Vue-Framework und kann uns dabei helfen, farbenfrohere Single-Page-Anwendungen zu erstellen. In diesem Artikel erklären wir die Installation und Verwendung von Vue-Routing und vermitteln Ihnen anhand von Beispielcode ein tieferes Verständnis für die Verwendung von Vue Router. Ich hoffe, es kann jedem helfen, den Vue-Router besser zu nutzen.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Installation und Verwendung von Routing in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage