So führen Sie das Routing in Vue durch

Vue.js ist ein beliebtes Front-End-Framework zum Erstellen von Single-Page-Webanwendungen. Vue bietet viele praktische Tools und Plugins, darunter Vue Router für die Verwaltung des Routings Ihrer Anwendung. In diesem Artikel wird erläutert, wie Sie mit Vue Router ein grundlegendes Routing-System erstellen.

1. Vue Router installieren

Um Vue Router verwenden zu können, müssen Sie ihn zunächst installieren. Zur Installation können Sie npm oder Yarn verwenden.

Verwenden Sie npm:

npm install vue-router 

Verwenden Sie Garn:

yarn add vue-router 

Nach Abschluss der Installation müssen wir Vue Router einführen.

import VueRouter from 'vue-router';

2. Vue Router-Instanz erstellen

Nach der Installation von Vue Router müssen wir eine Vue Router-Instanz erstellen, die Vue Router instanziiert und Routen definiert. In Vue.js werden Komponenten normalerweise mithilfe von Vue-Instanzen erstellt und verwaltet. Stellen Sie vor dem Erstellen einer Vue-Router-Instanz sicher, dass Sie zuerst eine Vue-Instanz erstellen.

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

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    // 路由信息定义
  ]
});

Im obigen Code erstellen wir eine Router-Instanz und definieren die Routing-Informationen der Website in der Routenoption. In Vue Router bestehen Routing-Informationen aus einer Reihe von Routing-Objekten. Jedes Routenobjekt definiert den Routenpfad und die der Route entsprechende Seitenkomponente.

3. Routing-Tabelle erstellen

Das in der Router-Instanz definierte Routenattribut wird zum Speichern von Routing-Informationen für die gesamte Anwendung verwendet. In diesem Attribut definieren wir eine Routing-Regel, indem wir einen URL-Pfad und die entsprechende Ansichtskomponente angeben.

import HomePage from '@/components/HomePage.vue';
import AboutPage from '@/components/AboutPage.vue';

const routes = [
  {
    path: '/',
    component: HomePage
  },
  {
    path: '/about',
    component: AboutPage
  }
];

Im obigen Code definieren wir zwei Routing-Regeln: / und /about, die jeweils den Komponenten HomePage und AboutPage zugeordnet sind.

4. Routing-Tabelle registrieren

Durch Aufrufen der Instanziierungsmethode von Vue Router können wir die Routing-Tabelle in der Vue-Anwendung registrieren. Dies kann durch Aufrufen der Vue.use()-Methode auf der Vue Router-Instanz erreicht werden.

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode: 'history'
});

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

Im obigen Code registrieren wir den Vue-Router auf der Vue-Instanz und instanziieren ihn. Als nächstes übergeben wir die Vue Router-Instanz an die Root-Vue-Instanz.

5. Routing-Links erstellen

In Vue Router können wir die Route-Link-Komponente (Router-Link) verwenden, um die Seitennavigation zu implementieren. Die Router-Link-Komponente generiert tatsächlich ein Tag und bindet automatisch Routing-Informationen.

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

Im obigen Code haben wir zwei Router-Link-Komponenten für die Navigation zur Startseite und zur About-Seite verwendet. Das Router-Link-Tag sollte in das Element eingeschlossen werden, das verknüpft werden muss.

6. Routenansicht erstellen

Vue Router bietet eine Komponente namens „router-view“ zum Rendern von Ansichten basierend auf der aktuellen Route.

<router-view/>

Im obigen Code haben wir ein Router-View-Tag verwendet, um die passende Komponente der aktuellen URL an der entsprechenden Stelle anzuzeigen.

7. Routenereignisse verarbeiten

In Vue Router können wir Ereignisse verarbeiten, wenn die Routennavigation ausgelöst wird. Dies kann durch Abhören von Ereignissen auf der Vue Router-Instanz erfolgen.

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  // 在路由开始跳转前，进行路由守卫
});

router.afterEach(() => {
  // 跳转完成后
});

Im obigen Code haben wir die Methoden beforeEach() und afterEach() verwendet, um auf Routing-Ereignisse zu warten. In der Methode beforeEach() können wir Routing-Guards durchführen, z. B. die Anforderung einer Benutzeranmeldung oder die Überprüfung von Benutzerberechtigungen. In der Methode afterEach() können wir Operationen nach dem Seitensprung ausführen.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit Vue Router Routen in einer Vue.js-Anwendung erstellen. Wir haben Vue Router installiert, eine Vue Router-Instanz erstellt und die Routing-Tabelle definiert. Außerdem haben wir behandelt, wie man Routenverknüpfungen und Routenansichten in einer Vue.js-Anwendung erstellt und wie man mit Routenereignissen umgeht. Durch die Verwendung von Vue Router können wir ganz einfach eine vollständige Single-Page-Webanwendung erstellen.

Das obige ist der detaillierte Inhalt vonSo führen Sie das Routing in Vue durch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!