close

Routing und Navigation in Vue .js – Ein umfassender Leitfaden

Routing und Navigation sind wesentliche Konzepte in Vue.js zum Erstellen von Seiten und zum Navigieren zwischen ihnen in einer Webanwendung. ist eine leistungsstarke und flexible Bibliothek zur Verwaltung des Systems in .js. Vue Router routing Vue

 

Hier sind die grundlegenden Konzepte im Zusammenhang mit route s in Vue.js:

  1. Route: A route definiert einen Pfad und verknüpft ihn mit einer entsprechenden Komponente. Jeder route hat einen Pfad und eine Komponente.

  2. Vue Router: ist eine Bibliothek zum Verwalten von s in .js. Es bietet Tools zum Definieren und Verwalten von s in einer Anwendung. Vue Router route Vue route Vue

  3. Route Komponente: Jede route hat eine entsprechende Komponente. Wenn a route aktiviert ist, wird die zugehörige Komponente angezeigt.

  4. Dynamisch Route: Mit einer Dynamik route können Sie s mit dynamischen Parametern definieren route. Sie können beispielsweise eine route mit dem Pfad „/user/:id“ definieren, um Benutzerinformationen mit der entsprechenden ID anzuzeigen.

  5. Verschachtelt Route: Eine Verschachtelung route ist ein Konzept, das es Ihnen ermöglicht, untergeordnete route Elemente innerhalb eines übergeordneten Elements zu verschachteln route. Dadurch können Sie komplexe Strukturen aufbauen route und Komponenten verschachtelt organisieren.

  6. Umleitung Route: Mit einer Umleitung route können Sie Benutzer von einem Pfad auf einen anderen umleiten. route Dies ist nützlich, wenn Benutzer von einem alten Pfad zu einem neuen wechseln möchten .

  7. Route Guard: Ein route Guard ist eine Funktion, mit der Sie den Zugriff auf s überprüfen und steuern können route. Durch den Einsatz route von Guards können Sie Bedingungen definieren, um Benutzer am Zugriff auf bestimmte s zu hindern route oder vor der Umleitung eine spezielle Behandlung durchzuführen.

 

Um zu verwenden, können Sie die folgenden Schritte ausführen: Vue Router

Schritt 1: Installation mit npm oder Yarn: Vue Router 

npm install vue-router

oder 

yarn add vue-router

Schritt 2: Erstellen Sie eine Datei im Stammverzeichnis des Projekts. In dieser Datei deklarieren und konfigurieren wir die s der Anwendung. router.js route 

import Vue from 'vue';  
import VueRouter from 'vue-router';  
  
Vue.use(VueRouter);  
  
const router = new VueRouter({
  routes: [  
    // Declare routes here  
  ]  
});  
  
export default router;

Schritt 3: Importieren Sie die main.js Datei und verknüpfen Sie sie mit der Anwendung: Vue Router Vue 

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

Schritt 4: In der Datei können Sie s mithilfe von Komponenten wie, und anderen Eigenschaften deklarieren. router.js route Vue Router path component

Sie können beispielsweise a route für die Homepage und a route für die About-Seite wie folgt deklarieren:

import Home from './components/Home.vue';  
import About from './components/About.vue';  
  
const router = new VueRouter({
  routes: [  
    { path: '/', component: Home },  
    { path: '/about', component: About }  
  ]  
});

Schritt 5: In Vue Komponenten können Sie Komponenten wie zum Erstellen von Links zu anderen s und zum Anzeigen des Inhalts des aktuellen s verwenden. <router-link> route <router-view> route

In der Vorlage der Home-Komponente können Sie beispielsweise Folgendes verwenden, um einen Link zur About-Seite zu erstellen: <router-link> 

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

In der Vorlage der App-Komponente können Sie Folgendes verwenden, um den Inhalt der aktuellen anzuzeigen: <router-view> route 

<router-view></router-view>

Mit diesen Schritten haben Sie Ihre .js-Anwendung eingerichtet und verwaltet. Vue Router routing navigation Vue