Wie verwende ich Subrouten im Vue Router?

Wie verwende ich Unterrouten im Vue Router?

Vue Router ist der offiziell von Vue.js bereitgestellte Routing-Manager, mit dem die Routing-Funktion der Front-End-Seite implementiert wird. Es ermöglicht uns, zwischen Seiten in der Anwendung zu springen und unterstützt die verschachtelte Verwendung von Unterrouten. In diesem Artikel wird die Verwendung von Subrouting im Vue Router ausführlich vorgestellt und anhand von Codebeispielen demonstriert.

In Vue Router können wir Routenkonfigurationselemente verwenden, um Routing-Regeln zu definieren. Im Routen-Array können Unterrouten verschachtelt deklariert werden. Unterroute bezieht sich auf eine Gruppe von Unterebenenrouten unter der übergeordneten Route, die verwendet werden, um feinkörnigere Seitensprünge zu erreichen.

Das Folgende ist ein Codebeispiel für die Verwendung von Child-Routing:

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Parent from './components/Parent.vue'
import Child from './components/Child.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Parent,
    children: [
      {
        path: 'child',
        component: Child
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

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

Im obigen Code definieren wir zwei Komponenten, Parent und Child, die dem Parent-Routing bzw. dem Child-Routing entsprechen. Im Routen-Array verwenden wir das Konfigurationselement „Children“, um untergeordnete Routen zu deklarieren. In diesem Beispiel ist der Pfad der übergeordneten Route „/“ und der Pfad der untergeordneten Route „child“, entsprechend den Komponenten „Parent“ und „Child“.

In der übergeordneten Komponente Parent müssen wir ein Tag hinzufügen, um den Inhalt der untergeordneten Route darzustellen. Dieses Tag ist . Nach dem Hinzufügen des -Tags zur Vorlage der übergeordneten Komponente wird die untergeordnete Komponente an dieser Position gerendert.

Das Folgende ist ein Codebeispiel der Parent-Komponente:

<!-- Parent.vue -->
<template>
  <div>
    <h2>父级路由</h2>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Parent'
}
</script>

In der Vorlage der Parent-Komponente können wir andere Inhalte hinzufügen, beispielsweise einen Titel. Rendern Sie dann den Inhalt der Unterroute über das Tag Auf diese Weise wird die der Unterroute entsprechende Komponente in der übergeordneten Komponente angezeigt.

Das Folgende ist ein Codebeispiel der Child-Komponente:

<!-- Child.vue -->
<template>
  <div>
    <h3>子级路由</h3>
    <p>这是子级路由的内容。</p>
  </div>
</template>

<script>
export default {
  name: 'Child'
}
</script>

In der Vorlage der Child-Komponente können wir den Inhalt der Unterroute anpassen. Dies ist nur ein einfaches Beispiel. Sie können komplexere Sub-Routing-Inhalte entsprechend den tatsächlichen Anforderungen definieren.

Verwenden Sie abschließend den VueRouter-Konstruktor in main.js, um eine Routing-Instanz zu erstellen und die zuvor definierten Routing-Regeln dafür zu konfigurieren. Übergeben Sie dann die Routing-Instanz in die Vue-Instanz und mounten Sie die Vue-Instanz über die Methode $mount auf der Seite.

Jetzt können wir den Code ausführen und die Wirkung sehen. Wenn auf den Pfad „/“ zugegriffen wird, wird der Inhalt der übergeordneten Route „Parent“ angezeigt und der Inhalt der untergeordneten Route „Child“ wird an der Tag-Position gerendert.

Zusammenfassend lässt sich sagen, dass Unterrouten in Vue Router über das untergeordnete Konfigurationselement im Routen-Array definiert werden können. Die übergeordnete Route rendert den Inhalt der untergeordneten Route über das Tag In der tatsächlichen Entwicklung können Unterrouten je nach Bedarf flexibel verwendet werden, um komplexere Seitensprünge und Komponentenverschachtelungen zu erreichen.

Ich hoffe, dieser Artikel kann Ihnen helfen, die Sub-Routing-Funktion in Vue Router zu verstehen und zu verwenden. Wenn Sie Fragen oder Beiträge haben, hinterlassen Sie diese bitte im Kommentarbereich.

Das obige ist der detaillierte Inhalt vonWie verwende ich Subrouten im Vue Router?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!