So aktivieren Sie die übergeordnete Route im Vue-Subrouting

Vue ist ein beliebtes JavaScript-Framework zum Erstellen dynamischer Weboberflächen. Es bietet einige nützliche Funktionen wie Komponentisierung, Routing usw.

In Vue ist Routing eine sehr nützliche Funktion. Vue Router ist der offizielle Routing-Manager von Vue.js. Er ist tief in den Vue.js-Kern integriert und kann problemlos mit anderen Bibliotheken oder Plug-Ins von Drittanbietern zusammenarbeiten.

In Vue Router besteht Routing aus einem Routing-Objekt und einer entsprechenden Komponente. In der tatsächlichen Entwicklung müssen wir manchmal die übergeordnete Route in der untergeordneten Route aktivieren, um eine flexiblere Seitennavigation zu erreichen.

In diesem Artikel stellen wir vor, wie Sie die übergeordnete Route mithilfe der untergeordneten Route von Vue Router aktivieren.

1. Untergeordnete Routen in übergeordneten Routen festlegen

Zuerst müssen wir untergeordnete Routen in übergeordneten Routen definieren. Um dies zu erreichen, können wir die Sub-Routing-Funktion von Vue Router verwenden. Zum Beispiel:

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

Im obigen Code definieren wir eine übergeordnete Route „/parent“, deren Komponente „Parent“ ist. In Parent definieren wir eine Unterroute „Child“, deren Komponente Child ist. Jetzt haben wir die untergeordnete Route in der übergeordneten Route eingerichtet.

2. Definieren Sie den Ausgang der Unterroute in der übergeordneten Route

Als nächstes müssen wir den Ausgang der Unterroute festlegen die übergeordnete Komponente. In Vue können Komponenten in anderen Komponenten verschachtelt werden und der Inhalt von Unterkomponenten kann in Form von Slots in übergeordneten Komponenten angezeigt werden. Wir können den Inhalt der untergeordneten Route anzeigen, indem wir einen Slot in der übergeordneten Komponente festlegen.

Zum Beispiel können wir ein -Tag in der Vorlage der übergeordneten Komponente hinzufügen, um den Inhalt der untergeordneten Route anzuzeigen:

<template>
  <div>
    <h1>Parent Component</h1>
    <router-view></router-view>
  </div>
</template>

#🎜🎜 #In Aktivieren Sie die übergeordnete Route in der untergeordneten Route

Da wir nun die untergeordnete Route in der übergeordneten Route definiert und den Ausgang der untergeordneten Route in der übergeordneten Komponente festgelegt haben, ist der nächste Schritt ist hinzuzufügen Die übergeordnete Route ist in aktiviert.

Um die übergeordnete Route zu aktivieren, können wir die Methode $router.push() in der Komponente der untergeordneten Route verwenden, um zum Pfad der übergeordneten Route zu springen. Zum Beispiel:

// child.vue
export default {
  methods: {
    goParent() {
      this.$router.push('/parent')
    }
  }
}

In diesem Beispiel definieren wir eine goParent-Methode in der Komponente der untergeordneten Route. Beim Aufruf der goParent-Methode verwenden wir die Methode $router.push(), um zum Pfad der übergeordneten Route „/parent“ zu springen.

Auf diese Weise können wir den Effekt erzielen, dass die übergeordnete Route in der untergeordneten Route aktiviert wird.

Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie man untergeordnete Routen verwendet, um übergeordnete Routen in Vue Router zu aktivieren. Die spezifischen Schritte sind wie folgt:

Definieren Sie die untergeordnete Route in der übergeordneten Route
1. Legen Sie den Ausgang der untergeordneten Route in der übergeordneten Komponente fest
Im untergeordneten Element Verwenden Sie beim Routing die Methode $router.push(), um zum Pfad der übergeordneten Route zu springen

Durch die oben genannten Schritte können wir das sehr bequem erreichen Auswirkung der Aktivierung der übergeordneten Route in der untergeordneten Route. Dies ermöglicht eine flexiblere Verwaltung der Seitennavigation.

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