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:

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

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

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

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!