Routing in Vue.js verstehen

Routing ist eine wesentliche Funktion bei der Entwicklung von Webanwendungen. In Vue.js können wir Vue Router verwenden, um die Navigation zwischen Seiten einfach zu verwalten. In diesem Beitrag erfahren Sie, wie Sie das Routing in einer Vue.js-Anwendung einrichten.

Was ist ein Vue-Router?

Vue Router ist die offizielle Bibliothek zur Verwaltung des Routings in Vue.js-Anwendungen. Mit Vue Router können wir Single-Page-Anwendungen (SPAs) erstellen, die eine reibungslose Navigation ohne Neuladen der Seite ermöglichen.

Vue Router installieren

Zuerst müssen wir Vue Router installieren. Wenn Sie Vue CLI verwenden, können Sie die Installation beim Erstellen eines neuen Projekts auswählen. Wenn nicht, können Sie es mit dem folgenden Befehl installieren:

npm install vue-router

Vue-Router einrichten

Nach der Installation müssen wir den Vue Router konfigurieren. Hier sind die grundlegenden Schritte zum Einrichten:

• Eine Router-Datei erstellen Erstellen Sie eine neue Datei mit dem Namen router.js im Ordner src: Vue aus 'vue' importieren; Router aus „vue-router“ importieren; Home aus './views/Home.vue' importieren; import About from './views/About.vue';

Vue.use(Router);

export default new Router({
  mode: 'history', // Using history mode for cleaner URLs
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
  ],
});

• Router in die Anwendung integrieren Als nächstes müssen wir den Router in unsere Vue-Instanz integrieren. Bearbeiten Sie die Datei main.js wie folgt:

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

new Vue({
  el: '#app',
  router, // Add the router to the Vue instance
  render: h => h(App),
});

• Router-Links verwenden Um zwischen den Seiten zu navigieren, verwenden wir die Komponente . Hier ist ein Beispiel für die Verwendung in der App.vue-Datei:

• Neue Seiten erstellen Erstellen wir nun zwei Komponenten, die wir verwenden werden: Home.vue und About.vue.

Home.vue:

Über.vue:

Jetzt können Sie Ihre Anwendung mit dem Befehl ausführen:

npm run serve

Öffnen Sie Ihren Browser und gehen Sie zu http://localhost:8080. Klicken Sie auf die Links „Startseite“ und „Info“, um zu sehen, wie die Weiterleitung funktioniert!

Abschluss

In diesem Beitrag haben wir die Grundlagen des Routings in Vue.js mit Vue Router behandelt. Mit dieser Routing-Funktion können Sie interaktivere und benutzerfreundlichere Anwendungen erstellen. Im nächsten Beitrag können wir uns mit erweiterten Funktionen von Vue Router befassen, wie z. B. Routenparametern und verschachtelten Routen.

Ich hoffe, Sie fanden diesen Beitrag hilfreich! Hinterlassen Sie gerne einen Kommentar, wenn Sie Fragen haben.