So zeigen Sie untergeordnete Routen in übergeordneten Routen in Vue an

Vue.js ist ein modernes JavaScript-Framework zum Erstellen von Single-Page-Webanwendungen. Es bietet einige nützliche Funktionen wie Routing. Mit Vue Router können wir Navigation und Status in unserer Anwendung einfach verwalten.

Im Vue-Router sind Routen in einer Baumstruktur organisiert. Wir erstellen eine übergeordnete Route und einige untergeordnete Routen und gruppieren sie dann. Auf diese Weise können wir verschiedene Seitenteile zusammenfassen und auf verschiedenen Seiten in der Hauptanwendung anzeigen.

Im Allgemeinen werden untergeordnete Routen nicht in übergeordneten Routen angezeigt. Stattdessen kombinieren wir sie und rendern sie schließlich auf der Root-Route der Hauptanwendung. Dieser Prozess kann durch die Funktion „Benannte Ansicht“ des Vue-Routings erreicht werden.

Named Views ist eine Vue Router-Funktion, die es uns ermöglicht, mehrere Ansichten in einer einzigen gerouteten Komponente zu rendern. In diesem Fall hat jede Ansicht einen eindeutigen Namen und kann in der übergeordneten Komponente verwendet werden.

Mithilfe benannter Ansichten können wir untergeordnete Routing-Komponenten an bestimmten Positionen innerhalb der übergeordneten Routing-Komponenten rendern. Dieser Standort wird durch ein benanntes Ansichts-Tag mit demselben Namen identifiziert.

Angenommen, wir haben eine übergeordnete Route mit drei untergeordneten Routen: Zuhause, Info, Kontakt. Wir können sie mit dem folgenden Code kombinieren:

<template>
  <div>
    <header>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </header>

    <main>
      <router-view name="home"></router-view>
      <router-view name="about"></router-view>
      <router-view name="contact"></router-view>
    </main>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent',
  components: {}
}
</script>

Im obigen Code haben wir drei benannte Ansichts-Tags verwendet und sie „home“, „about“ und „contact“ benannt. Dieser Name kann mithilfe von Requisiten an die untergeordnete Komponente übergeben und innerhalb der untergeordneten Komponente verwendet werden.

Dann können wir in unseren untergeordneten Komponenten das Routenkonfigurationsobjekt verwenden, um anzugeben, welche Komponente in welcher benannten Ansicht gerendert werden soll. Zum Beispiel:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: HomeComponent,
        home: SidebarComponent
      }
    },
    {
      path: '/about',
      components: {
        default: AboutComponent,
        about: SidebarComponent
      }
    },
    {
      path: '/contact',
      components: {
        default: ContactComponent,
        contact: SidebarComponent
      }
    }
  ]
})

Im obigen Code haben wir für jede untergeordnete Route eine benannte Ansicht angegeben. Beispielsweise haben wir in der „Home“-Route die „Sidebar“-Komponenten verwendet und sie in der benannten „Home“-Ansicht platziert. Ebenso verwenden wir sie in den Routen „about“ und „contact“ und fügen sie in die benannte Ansicht der Antwort ein.

Zusammenfassend lässt sich sagen, dass wir mit dem Router von Vue.js die Navigation und den Status in unserer Anwendung problemlos verwalten können. Durch die Verwendung benannter Ansichten können wir untergeordnete Routing-Komponenten an einer bestimmten Position der übergeordneten Routing-Komponente rendern. Dadurch können wir komplexe Single-Page-Anwendungen erstellen und diese übersichtlich und organisiert verwalten.

Das obige ist der detaillierte Inhalt vonSo zeigen Sie untergeordnete Routen in übergeordneten Routen in Vue an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!