Wie verwende ich Vue-Router, um verschachteltes Routing in einer Vue-Anwendung zu implementieren?

Wie verwende ich Vue-Router, um verschachteltes Routing in der Vue-Anwendung zu implementieren?

Vue-Router ist der offizielle Routing-Manager von Vue.js, der uns dabei helfen kann, Routing-Funktionen einfach in Single-Page-Anwendungen zu implementieren. In der tatsächlichen Projektentwicklung stoßen wir häufig auf Szenarien, die eine verschachtelte Weiterleitung erfordern. Beispielsweise gibt es in einem Benutzerverwaltungssystem neben der Startseite auch Unterseiten wie Benutzerliste, Benutzerdetails usw. In diesem Artikel wird erläutert, wie Sie mit Vue-Router verschachteltes Routing in Vue-Anwendungen implementieren, und es werden spezifische Codebeispiele bereitgestellt.

Zuerst müssen wir Vue-Router installieren. Sie können npm oder Yarn verwenden, um Vue-Router-Abhängigkeiten zu installieren:

npm install vue-router
# 或者
yarn add vue-router

Nach der Installation müssen wir Vue-Router in die Eintragsdatei der Vue-Anwendung importieren und es mit der Vue.use()-Methode registrieren:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Dann , Wir können eine Routing-Instanz erstellen und das Routing konfigurieren:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/users',
    component: Users,
    children: [
      {
        path: ':id',
        component: UserDetails
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

Im obigen Code definieren wir zwei Routen, eine ist die Root-Route „/“, die entsprechende Komponente ist Home, die andere ist die Benutzerroute „/users“; , Die entsprechende Komponente ist Benutzer. Beim Benutzerrouting definieren wir eine Unterroute „:id“ und die entsprechende Komponente ist UserDetails.

Als nächstes müssen wir die Router-Instanz in der Vue-Instanz verwenden:

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 导入路由实例

new Vue({
  router, // 使用router实例
  render: h => h(App),
}).$mount('#app')

Jetzt haben wir die Grundkonfiguration von Vue-Router abgeschlossen. Als nächstes können wir Home-, Users- und UserDetails-Komponenten erstellen und die Komponenten in den entsprechenden Routen rendern.

Zuerst erstellen wir die Home-Komponente:

<template>
  <div>
    <h1 id="Home">Home</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

Dann erstellen wir die Benutzerkomponente und zeigen die Benutzerliste und den Link zu Benutzerdetails in dieser Komponente an:

<template>
  <div>
    <h1 id="Users">Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        <router-link :to="'/users/' + user.id">{{ user.name }}</router-link>
      </li>
    </ul>
    <router-view></router-view> <!--显示子路由组件-->
  </div>
</template>

<script>
export default {
  name: 'Users',
  data() {
    return {
      users: [
        { id: 1, name: 'User 1' },
        { id: 2, name: 'User 2' },
        { id: 3, name: 'User 3' }
      ]
    }
  }
}
</script>

Schließlich erstellen wir die UserDetails-Komponente, um Benutzerdetails anzuzeigen:

<template>
  <div>
    <h2 id="User-Details">User Details</h2>
    <p>ID: {{ $route.params.id }}</p>
    <p>Name: {{ user.name }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserDetails',
  computed: {
    user() {
      const userId = parseInt(this.$route.params.id)
      return this.users.find(user => user.id === userId)
    }
  },
  data() {
    return {
      users: [
        { id: 1, name: 'User 1' },
        { id: 2, name: 'User 2' },
        { id: 3, name: 'User 3' }
      ]
    }
  }
}
</script>

Im obigen Code verwenden wir $route.params.id, um die dynamischen Parameter in der Route abzurufen und die entsprechenden Benutzerinformationen basierend auf diesem Parameter abzurufen.

Jetzt haben wir die Konfiguration des verschachtelten Vue-Router-Routings und die Erstellung von Komponenten abgeschlossen. Greifen Sie in einem Browser auf die Anwendung zu und Sie sehen eine Startseite und einen Navigationslink zu einer Benutzerliste. Klicken Sie auf den Link „Benutzer“, um eine Liste der Benutzer anzuzeigen. Klicken Sie auf den Link jedes Benutzers, um dessen Details anzuzeigen.

Zusammenfassend müssen wir die folgenden Schritte ausführen, um mit Vue-Router verschachteltes Routing in einer Vue-Anwendung zu implementieren:

1. Vue-Router installieren und importieren.
2. Erstellen Sie eine Routing-Instanz und konfigurieren Sie das Routing.
3. Router-Instanz in Vue-Instanz verwenden.
4. Erstellen Sie die entsprechende Komponente und rendern Sie die Komponente in der erforderlichen Route.
5. Verwenden Sie das Tag in der Ansicht, um untergeordnete Routing-Komponenten anzuzeigen.

Mit den oben genannten Schritten können Sie die verschachtelte Routing-Funktion erfolgreich in Ihrer Vue-Anwendung implementieren. Viel Spaß beim Schreiben!

Das obige ist der detaillierte Inhalt vonWie verwende ich Vue-Router, um verschachteltes Routing in einer Vue-Anwendung zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!