Vue.js für Anfänger Eine vollständige Anleitung zum Routing mit Vue Router

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 zur Einrichtung:

• Erstellen Sie eine Router-Datei 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 den Komponente. Hier ist ein Beispiel für die Verwendung in der App.vue-Datei:

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view> <!-- Place to display the matched component -->
  </div>
</template>

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

Home.vue:

<template>
  <div>
    <h1>Welcome to the Home Page!</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

Über.vue:

<template>
  <div>
    <h1>This is the About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>

Jetzt können Sie Ihre Anwendung mit dem folgenden 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 das Routing 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.

Das obige ist der detaillierte Inhalt vonVue.js für Anfänger Eine vollständige Anleitung zum Routing mit Vue Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!