So konfigurieren Sie Vue-Subrouting

Vue ist ein beliebtes JavaScript-Framework zum Erstellen interaktiver Webanwendungen. Mit der Routing-Funktion von Vue können wir eine einzelne Seitenanwendung (SPA) erstellen, die verschiedenen Komponenten entspricht, und dann wird der angegebene Inhalt in der Komponente gerendert. Unterrouten sind eine spezielle Art von Routing im Vue-Routing, die in andere Routen verschachtelt werden kann. In diesem Artikel wird erläutert, wie Sie Subrouten in Vue konfigurieren.

Zuerst müssen wir sicherstellen, dass Vue und die zugehörigen Abhängigkeiten installiert sind. Am besten erstellen Sie ein neues Projekt mit Vue CLI. Als nächstes müssen wir die Vue-Komponente erstellen und die Route definieren.

Definieren Sie die übergeordnete Route
Definieren Sie die Route in der übergeordneten Komponente (normalerweise die Stammroute /), um einen Container für die untergeordnete Komponente bereitzustellen.

// src/router/index.js

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Definieren Sie untergeordnete Routen
Erstellen Sie dann eine Route, die auf die untergeordnete Komponente in der übergeordneten Komponente verweist.

// src/router/index.js

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    children: [
      {
        path: 'about',
        name: 'About',
        component: () => import('../views/About.vue')
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

In diesem Beispiel ist „/“ die Root-Route, die auf die Home-Komponente verweist. Wir haben eine Unterroute für die Home-Komponente als „/about“ erstellt, die auf die About-Komponente verweist.

Fügen Sie einen untergeordneten Komponentencontainer in der Vorlage für die übergeordnete Komponente hinzu.
In der Vorlage der Home-Komponente müssen wir einen Platzhaltercontainer hinzufügen, um die untergeordnete Komponente darzustellen.

<template>
  <div>
    <h1>Home</h1>
    <router-view></router-view>
  </div>
</template>

Diese „router-view“-Direktive ist ein untergeordneter Komponentencontainer, der die über die untergeordnete Route angegebene Komponente anzeigt.

Inhalt in der Vorlage für untergeordnete Komponenten hinzufügen
In der Vorlage der About-Komponente können wir einige Inhalte hinzufügen, um zu zeigen, worum es geht.

<template>
  <div>
    <h1>About</h1>
    <p>This is an about page.</p>
  </div>
</template>

Jetzt haben wir erfolgreich einen Vue-Subrouter konfiguriert. Testen Sie es, um zu sehen, ob es richtig angezeigt wird.

Zusammenfassung
Es gibt drei grundlegende Schritte zum Konfigurieren des Vue-Subroutings. Zu diesen Schritten gehören:

Übergeordnete Route definieren: Deklarieren Sie die übergeordnete Komponente in der Stammroute und navigieren Sie deren Route zu dieser Komponente.

Unterroute definieren: Routingpunkte für Unterkomponenten in der übergeordneten Komponente erstellen.

Untergeordneten Komponentencontainer zur übergeordneten Komponentenvorlage hinzufügen: Untergeordnete Komponenten in Platzhalterelemente einfügen.

Inhalt in Vorlage für untergeordnete Komponenten hinzufügen: Stellen Sie Inhalte für untergeordnete Komponenten bereit, um deren Funktionalität zu präsentieren.

Letzte Erinnerung: Wenn Sie Sub-Routing in Vue verwenden, müssen Sie den Pfad korrekt halten. Der Pfad muss bei der übergeordneten Komponente beginnen und mit einem Schrägstrich (/) beginnen.

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie Vue-Subrouting. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!