So richten Sie Unterrouten in Vue ein

Vue ist ein beliebtes JavaScript-Framework, das auf dem MVVM-Muster basiert und eine einfache, flexible und effiziente Möglichkeit zur Entwicklung von Webanwendungen bietet. Der Routing-Mechanismus in Vue ermöglicht Entwicklern die einfache Verwaltung mehrerer Seiten sowie des Status und der Interaktion zwischen Seiten. In diesem Artikel erfahren Sie, wie Sie Unterrouten in Vue einrichten, um Ihre Webanwendung besser zu verwalten und zu organisieren.

1. Was ist Vue-Subrouting?

Eine Routing-Komponente in Vue kann eine oder mehrere Unterkomponenten enthalten. Untergeordnetes Routing bedeutet, dass eine übergeordnete Routing-Routing-Konfiguration mehrere untergeordnete Routing-Konfigurationen haben kann. Im Routing-System von Vue sind Unterrouten verschachtelbar, was bedeutet, dass eine Unterroute ihre eigenen Unterrouten haben kann, was eine bessere Organisation und Verwaltung verschiedener Seiten in der Anwendung ermöglicht.

2. Wie richte ich Vue-Subrouting ein?

1. Definieren Sie die übergeordnete Route in Vue Router

Zuerst müssen Sie die übergeordnete Route in Vue Router definieren Kinderrouten. Sie können den Vue-Router-Code verwenden, um die übergeordnete Route zu definieren:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import ParentComp from './views/ParentComp.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/parent',
      name: 'parentComp',
      component: ParentComp
    }
  ]
})

Im obigen Code sind zwei Routen definiert: eine ist die Stammroute und die andere ist die übergeordnete Route. Der Pfad der übergeordneten Route ist „/parent“.

2. Unterroute in der Komponente der übergeordneten Route hinzufügen

Dann müssen Sie die Unterroute in der Komponente der übergeordneten Route hinzufügen übergeordnete Route. Sie können das verschachtelte Routing von Vue Router verwenden, um Unterrouten hinzuzufügen. Verschachteltes Routing platziert die Konfiguration des Unter-Routings in der Komponente des übergeordneten Routings. Die Definition des verschachtelten Routings umfasst Pfad, Name und Komponente, zum Beispiel:

<template>
  <div class="parent-comp">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'ParentComp',
  components: {
    ChildComp1: () => import('../components/ChildComp1.vue'),
    ChildComp2: () => import('../components/ChildComp2.vue')
  },
  data () {
    return {}
  },
  children: [
    {
      path: 'childcomp1',
      name: 'childcomp1',
      component: 'ChildComp1'
    },
    {
      path: 'childcomp2',
      name: 'childcomp2',
      component: 'ChildComp2'
    }
  ]
}
</script>

<style scoped>
.parent-comp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

Im obigen Code ist ein Name definiert Es ist die übergeordnete Komponente von ParentComp und enthält zwei untergeordnete Routendefinitionen. Die Namen der untergeordneten Routing-Komponenten sind ChildComp1 und ChildComp2 und die Pfade sind „/parent/childcomp1“ bzw. „/parent/childcomp2“.

3. Unterkomponenten in übergeordneten Komponenten verwenden

Schließlich müssen Sie Unterkomponenten in übergeordneten Komponenten verwenden, damit die entsprechenden Komponenten verwendet werden können wird auf der Unterrouting-Seite der übergeordneten Komponente angezeigt. Sie können die Komponente von Vue Router verwenden, um Komponenten unter der aktuellen Route anzuzeigen. Sie können die -Komponente wie folgt in die Vorlage der übergeordneten Komponente einfügen:

<template>
  <div class="parent-comp">
    <router-view></router-view>
  </div>
</template>

Auf diese Weise wird beim Zugriff auf „/parent/childcomp1“ und „/parent/childcomp2“ Im Browser werden die Komponenten ChildComp1 und ChildComp2 separat angezeigt.

3. Zusammenfassung

Vue Router bietet eine sehr flexible Routenverwaltungsmethode, insbesondere für die Verarbeitung von Unterrouten. Durch die rationelle Verwendung des Subrouting-Mechanismus beim Vue-Routing können verschiedene Seiten in Vue-Anwendungen besser organisiert und verwaltet werden und die Skalierbarkeit und Wartbarkeit von Webanwendungen verbessert werden.

Das obige ist der detaillierte Inhalt vonSo richten Sie Unterrouten in Vue ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!