So springen Sie in Vue zur Unterroute

Vue ist ein beliebtes Front-End-Framework, das einen komponentenbasierten Ansatz zum Erstellen von Anwendungen verwendet. Vue Router ist ein von Vue bereitgestelltes Plug-In, das die Anwendung problemlos in mehrere Ansichten aufteilen und Benutzern die Navigation zwischen Ansichten ermöglichen kann. Im Vue-Router ist jede Ansicht eine Route, und jede Route kann mehrere Unterrouten haben. In diesem Artikel erfahren Sie, wie Sie Unterrouten überspringen.

1. Unterrouten deklarieren

Das Deklarieren von Unterrouten im Vue-Router erfordert die Verwendung verschachtelter Routen. Verwenden Sie das Feld „Kinder“ in der übergeordneten Route, um untergeordnete Routen zu deklarieren. Zum Beispiel:

const router = new VueRouter({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: 'child',
          component: Child
        }
      ]
    }
  ]
})

Im obigen Code deklarieren wir eine übergeordnete Route namens „parent“ und eine untergeordnete Route namens „child“. Wenn der Benutzer auf /parent/child zugreift, werden die Parent- und Child-Komponenten gerendert.

2. Jump-Subroute

Jump-Routing in Vue kann die Router-Link-Komponente oder die programmgesteuerte Navigation mithilfe des $router-Objekts verwenden. Beim Überspringen von Unterrouten müssen wir den vollständigen Routing-Pfad bereitstellen. Um beispielsweise im obigen Beispiel zur untergeordneten Route zu springen, müssen wir den vollständigen Routenpfad von /parent/child angeben.

Router-Link verwenden:

<router-link to="/parent/child">跳转到子路由</router-link>

Programmatische Navigation verwenden:

this.$router.push('/parent/child')

Im obigen Code verwenden wir die Methode $router.push, um zur Route zu springen.

3. Übergabe von Parametern in der programmatischen Navigation

In der Praxis müssen wir oft zu Unterrouten springen und einige Parameter übergeben. In Vue können wir Parameter mithilfe des Felds „params“ in der programmgesteuerten Navigation übergeben. Zum Beispiel:

this.$router.push({ path: '/parent/child', params: { id: 1 }})

Im obigen Code haben wir einen ID-Parameter mit dem Wert 1 übergeben. In der Sub-Routing-Komponente, die Parameter empfängt, können wir die Parameter über this.$route.params abrufen.

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出1
  }
}

4. Fazit

In diesem Artikel wird vorgestellt, wie man Unterrouten im Vue-Routing überspringt. Wir haben behandelt, wie man Unterrouten deklariert, wie man Router-Link und programmatische Navigation verwendet, um zu Unterrouten zu springen, und wie man Parameter übergibt. Ich hoffe, dieser Artikel ist für Anfänger hilfreich.

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