So verwenden Sie Routing, um Seitensprünge und -wechsel in Vue zu implementieren

Es ist sehr einfach, Routing zum Springen und Wechseln von Seiten in Vue zu verwenden. Vue Router ist der offizielle Routing-Manager von Vue.js, der uns bei der Implementierung von Seitenwechsel und Navigation in Vue-Anwendungen helfen kann. In diesem Artikel wird anhand spezifischer Codebeispiele erläutert, wie Sie mit Vue Router Seitensprünge und -wechsel erzielen.

Zuerst müssen wir Vue Router installieren. Vue Router kann über npm oder Yarn installiert werden. Nachdem

npm install vue-router

oder

yarn add vue-router

installiert ist, führen Sie Vue Router dort ein, wo Sie ihn verwenden müssen.

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

Vue.use(VueRouter)

Als nächstes müssen wir eine VueRouter-Instanz erstellen und das Routing konfigurieren. Wir können eine Routing-Konfiguration in einer separaten Datei erstellen und diese Routing-Konfiguration dann in die Hauptdatei importieren und verwenden.

// router.js

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ],
  mode: 'history' // 可选，使用history模式可以去掉URL中的#
})

export default router

Im obigen Code haben wir drei Routen definiert: „/“ entspricht der Home-Komponente, „/about“ entspricht der About-Komponente und „/contact“ entspricht der Contact-Komponente. Darüber hinaus können wir den Routing-Modus auch über die Modusoption festlegen. Der Standardwert ist der Hash-Modus. Verwenden Sie den Verlaufsmodus, um das # in der URL zu entfernen.

Führen Sie dann diese Routing-Konfiguration in der Hauptdatei ein und verwenden Sie sie.

// main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router, // 将路由配置注入Vue实例
  render: h => h(App)
}).$mount('#app')

Im obigen Code injizieren wir die Routing-Konfiguration in die Vue-Instanz, damit die Routing-Funktionalität in der gesamten Anwendung verwendet werden kann.

Als nächstes können wir das -Tag in der Komponente verwenden, um zur Seite zu springen.

<!-- Home.vue -->

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

Im obigen Code verwenden wir das Tag , um einen Link zu erstellen, und das to-Attribut gibt den Pfad an, zu dem gesprungen werden soll.

Schließlich können wir das Tag in der Komponente verwenden, um die Komponente anzuzeigen, die der aktuellen Route entspricht.

<!-- App.vue -->

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

Im obigen Code zeigt das Tag die entsprechenden Komponenten basierend auf der aktuellen Route dynamisch an.

Zu diesem Zeitpunkt haben wir die Verwendung von Routing in Vue abgeschlossen, um Seitensprünge und -wechsel zu erreichen. Führen Sie die Anwendung aus und Sie werden feststellen, dass die Seite nach dem Klicken auf das Tag automatisch zur entsprechenden Komponente springt und diese im Tag anzeigt.

Das Obige ist der grundlegende Prozess der Verwendung von Vue Router zum Erreichen von Seitensprüngen und -wechseln. Durch die Einführung von Vue Router, die Konfiguration des Routings und die Verwendung der Tags können wir Seitensprünge und -wechsel schnell und einfach implementieren. Ich hoffe, dass dieser Artikel für Ihr Lernen und Ihre Entwicklung hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Routing, um Seitensprünge und -wechsel in Vue zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!