So verwenden Sie Routing, um einen Seitensprung und Zugriff in Vue zu erreichen

So verwenden Sie Routing, um Seitensprünge und Zugriffe in Vue zu erreichen

Im Vue-Framework ist Routing ein sehr wichtiges Konzept, mit dem Sprünge und Zugriffe zwischen verschiedenen Seiten in einer Einzelseitenanwendung (Single Page Application) realisiert werden können. Vue stellt einen Vue-Router zur Verfügung, der uns bei der Routing-Verwaltung hilft.

1. Vue-Router installieren und konfigurieren
Zuerst müssen wir npm verwenden, um Vue-Router zu installieren, das Befehlszeilentool öffnen und den folgenden Befehl ausführen:
npm install vue-router

Dann im Hauptteil. js-Datei des Projekts müssen Sie vue-router einführen und aktivieren. Der Code lautet wie folgt:
Vue von 'vue' importieren
VueRouter von 'vue-router' importieren

Vue.use(VueRouter);

const router = new VueRouter({
mode: 'history',
Routen: [

{
  path: '/',
  name: 'Home',
  component: Home
},
{
  path: '/about',
  name: 'About',
  component: About
}

]
})

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

Im obigen Code haben wir zuerst Einführung von Vue und VueRouter. Verwenden Sie dann das Vue-Router-Plug-In über Vue.use (VueRouter). Als Nächstes haben wir die Router-Instanz definiert, in der der Modus auf „History“ eingestellt ist. Dabei handelt es sich um einen gängigen Routing-Modus, der die HTML5-History-API zum Verwalten von Routing-Änderungen verwendet. Routen ist ein Array, mit dem der Pfad, der Name und die entsprechende Komponente der Route definiert werden.

2. Seitensprung und Zugriff implementieren
Im obigen Code haben wir zwei Routing-Pfade definiert, nämlich „/“ und „/about“. Diese beiden Pfade entsprechen jeweils zwei Komponenten, wobei die Home-Komponente dem „/“-Pfad und die About-Komponente dem „/about“-Pfad entspricht.

In der Vue-Komponente können wir die Router-Link-Komponente verwenden, um Routing-Sprünge zu implementieren. Der Code lautet wie folgt:
Home
About

In Der obige Code Die Router-Link-Komponente wird in ein Tag gerendert, das den Text „Home“ und „Info“ anzeigt und beim Klicken einen Routing-Sprung auslöst.

Darüber hinaus können wir die Router-View-Komponente verwenden, um die Komponenten anzuzeigen, die der aktuellen Route entsprechen. Der Code lautet wie folgt:

Der obige Code rendert die entsprechenden Komponenten dynamisch entsprechend dem Pfad der aktuellen Route.

Neben der Verwendung von Router-Link- und Router-View-Komponenten können wir auch Seitensprünge durch programmatische Routennavigation implementieren. Der Code lautet wie folgt:
// In der Vue-Komponente
this.$router.push('/') // Zum '/'-Pfad springen

Alternativ können wir auch benannte Routen verwenden, um zur Seite zu springen. Der Code lautet wie folgt:
// In der Vue-Komponente
this.$router.push({ name: 'Home' }) // Springe zur Route mit dem Namen 'Home'

Zusammenfassung
In Vue durch vue- Mit dem Router-Plug-in können wir ganz einfach zu Seiten springen und darauf zugreifen. Durch die Konfiguration von Routing-Objekten, die Definition der Zuordnungsbeziehung zwischen Routing-Pfaden und Komponenten sowie die Verwendung von Router-Link-Komponenten und Router-View-Komponenten können Routing-Navigation und dynamisches Komponenten-Rendering auf der Seite implementiert werden. Darüber hinaus können durch programmatische Routennavigation Seitensprünge basierend auf bestimmten Bedingungen in der Vue-Komponente implementiert werden. Das Obige ist eine kurze Einführung und ein Codebeispiel für die Verwendung von Routing in Vue, um Seitensprünge und Zugriffe zu erreichen. Hoffe das hilft!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Routing, um einen Seitensprung und Zugriff in Vue zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!