Bagaimana untuk menggunakan Vue-Router untuk melaksanakan penghalaan bersarang dalam aplikasi Vue?

Bagaimana untuk menggunakan Vue-Router untuk melaksanakan penghalaan bersarang dalam aplikasi Vue?

Vue-Router ialah pengurus penghalaan rasmi Vue.js, yang boleh membantu kami melaksanakan fungsi penghalaan dengan mudah dalam aplikasi satu halaman. Dalam pembangunan projek sebenar, kita sering menghadapi senario yang memerlukan penghalaan bersarang Sebagai contoh, dalam sistem pengurusan pengguna, selain halaman utama, terdapat juga sub-halaman seperti senarai pengguna, butiran pengguna, dll. Artikel ini akan memperkenalkan cara menggunakan Vue-Router untuk melaksanakan penghalaan bersarang dalam aplikasi Vue dan memberikan contoh kod khusus.

Pertama, kita perlu memasang Vue-Router. Anda boleh menggunakan npm atau yarn untuk memasang dependencies Vue-Router:

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

Selepas pemasangan, kita perlu mengimport Vue-Router dalam fail kemasukan aplikasi Vue dan mendaftarkannya menggunakan kaedah Vue.use():

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

Vue.use(VueRouter)

Kemudian , Kami boleh mencipta contoh penghalaan dan mengkonfigurasi penghalaan:

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

Dalam kod di atas, kami mentakrifkan dua laluan, satu ialah laluan akar "/", komponen yang sepadan ialah Laman Utama; , Komponen yang sepadan ialah Pengguna. Dalam penghalaan pengguna, kami mentakrifkan sub-laluan ":id", dan komponen yang sepadan ialah UserDetails.

Seterusnya, kita perlu menggunakan contoh penghala dalam contoh Vue:

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

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

Sekarang kita telah melengkapkan konfigurasi asas Vue-Router. Seterusnya kita boleh membuat komponen Home, Users dan UserDetails masing-masing, dan menjadikan komponen dalam laluan yang sepadan.

Mula-mula, mari buat komponen Laman Utama:

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

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

Kemudian, mari buat komponen Pengguna dan paparkan senarai pengguna dan pautan ke butiran pengguna dalam komponen ini:

<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>

Akhir sekali, kami cipta komponen UserDetails untuk memaparkan butiran pengguna:

<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>

Dalam kod di atas, kami menggunakan $route.params.id untuk mendapatkan parameter dinamik dalam laluan dan mendapatkan maklumat pengguna yang sepadan berdasarkan parameter ini.

Kini, kami telah melengkapkan konfigurasi penghalaan bersarang Vue-Router dan penciptaan komponen. Akses aplikasi dalam penyemak imbas dan anda akan melihat halaman utama dan pautan navigasi ke senarai pengguna. Klik pada pautan "Pengguna" dan anda akan melihat senarai pengguna dan boleh klik pada pautan setiap pengguna untuk melihat butiran pengguna.

Untuk meringkaskan, untuk menggunakan Vue-Router untuk melaksanakan penghalaan bersarang dalam aplikasi Vue, kita perlu melakukan langkah berikut:

1. Pasang dan import Vue-Router.
2. Buat contoh penghalaan dan konfigurasikan penghalaan.
3. Gunakan contoh penghala dalam contoh Vue.
4. Buat komponen yang sepadan dan jadikan komponen dalam laluan yang diperlukan.
5. Gunakan teg dalam paparan untuk memaparkan komponen sub-router.

Dengan langkah di atas, anda akan berjaya melaksanakan fungsi penghalaan bersarang dalam aplikasi Vue anda. Selamat menulis!

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue-Router untuk melaksanakan penghalaan bersarang dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!