Bagaimana untuk menggunakan Vue untuk melaksanakan menu navigasi berbilang peringkat?

Dengan perkembangan Internet, semakin banyak laman web perlu melaksanakan menu navigasi berbilang peringkat untuk memaparkan pelbagai kategori dan sub-kategori bagi memudahkan pengguna melayari dan menggunakan. Dalam rangka kerja bahagian hadapan, Vue juga menyediakan sokongan yang baik untuk membantu kami melaksanakan menu navigasi berbilang peringkat. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan menu navigasi berbilang peringkat.

1. Konsep asas

Sebelum menggunakan Vue untuk melaksanakan menu navigasi berbilang peringkat, kita perlu memahami beberapa konsep asas:

1. Nod (nod): Setiap elemen dalam struktur pokok dipanggil nod.
2. Nod akar: Nod paling atas dalam struktur pokok dipanggil nod akar.
3. Nod daun: Nod dalam struktur pokok yang tidak mempunyai nod anak dipanggil nod daun.
4. Nod induk: Nod dengan nod anak dipanggil nod induk.
5. Nod anak: Nod yang terkandung oleh nod induk dan muncul sebagai keturunan langsungnya dipanggil nod anak.

2. Reka bentuk struktur data

Untuk melaksanakan menu navigasi berbilang peringkat dalam Vue, kita perlu mentakrifkan struktur data untuk menyimpan data menu. Kita boleh menggunakan format JSON untuk menyimpan data menu. Kita perlu menentukan sifat berikut untuk setiap item menu:

1. id: Setiap item menu perlu mempunyai id unik.
2. tajuk: Tajuk menu.
3. ikon: Ikon menu.
4. laluan: pautan ke menu.
5. kanak-kanak: data menu peringkat seterusnya Jika menu semasa ialah nod daun, kanak-kanak ialah tatasusunan kosong.

Berikut ialah contoh data menu pelbagai peringkat mudah:

[
  {
    "id": 1,
    "title": "菜单 1",
    "icon": "fa fa-home",
    "path": "/menu1",
    "children": [
      {
        "id": 11,
        "title": "菜单 1-1",
        "icon": "fa fa-book",
        "path": "/menu1-1",
        "children": [
          {
            "id": 111,
            "title": "菜单 1-1-1",
            "icon": "fa fa-link",
            "path": "/menu1-1-1",
            "children": []
          },
          {
            "id": 112,
            "title": "菜单 1-1-2",
            "icon": "fa fa-link",
            "path": "/menu1-1-2",
            "children": []
          }
        ]
      },
      {
        "id": 12,
        "title": "菜单 1-2",
        "icon": "fa fa-book",
        "path": "/menu1-2",
        "children": []
      }
    ]
  },
  {
    "id": 2,
    "title": "菜单 2",
    "icon": "fa fa-home",
    "path": "/menu2",
    "children": [
      {
        "id": 21,
        "title": "菜单 2-1",
        "icon": "fa fa-book",
        "path": "/menu2-1",
        "children": []
      },
      {
        "id": 22,
        "title": "菜单 2-2",
        "icon": "fa fa-book",
        "path": "/menu2-2",
        "children": []
      }
    ]
  }
]

3. Reka bentuk komponen

Untuk melaksanakan menu navigasi berbilang peringkat dalam Vue, kita boleh menggunakan komponen untuk membinanya. Memandangkan menu navigasi berbilang peringkat ialah struktur pokok, kita boleh menggunakan komponen rekursif untuk mencipta menu berstruktur pokok. Komponen rekursif ialah apabila komponen memanggil dirinya dalam templatnya.

1. Komponen menu

Komponen menu ialah komponen akar kami, yang memanggil komponen MenuItem untuk mencipta item menu dan menetapkan gaya mengikut tahap yang berbeza.

<template>
  <ul class="menu">
    <menu-item
      v-for="(item, index) in list"
      :key="item.id"
      :item="item"
      :level="1"
      :last="index === list.length - 1"
    ></menu-item>
  </ul>
</template>

<script>
import MenuItem from './MenuItem.vue';

export default {
  name: 'Menu',
  components: {
    MenuItem,
  },
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
};
</script>

<style scoped>
.menu {
  padding: 0;
  margin: 0;
}
</style>

2. Komponen MenuItem

Komponen MenuItem mencipta item menu berdasarkan data menu masuk dan menentukan sama ada item menu semasa mempunyai item menu peringkat seterusnya Jika ya, menu peringkat seterusnya dibuat secara rekursif, jika tidak menu semasa dipaparkan Alamat pautan item.

<template>
  <li :class="{'has-children': hasChildren}">
    <router-link :to="item.path"><i :class="item.icon"></i>{{ item.title }}</router-link>
    <ul v-if="hasChildren">
      <menu-item
        v-for="(child, index) in item.children"
        :key="child.id"
        :item="child"
        :level="level + 1"
        :last="index === item.children.length - 1"
      ></menu-item>
    </ul>
  </li>
</template>

<script>
import MenuItem from './MenuItem.vue';

export default {
  name: 'MenuItem',
  components: {
    MenuItem,
  },
  props: {
    item: {
      type: Object,
      required: true,
    },
    level: {
      type: Number,
      required: true,
    },
    last: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    hasChildren() {
      return this.item.children && this.item.children.length > 0;
    },
    indent() {
      return {
        paddingLeft: `${this.level * 20}px`,
        borderBottom: this.last ? 'none' : '',
      };
    },
  },
};
</script>

<style scoped>
.has-children {
  position: relative;
}

li i {
  margin-right: 5px;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

li:last-child {
  border-bottom: none;
}
</style>

4. Use cases

Seterusnya kami akan menggunakan komponen menu navigasi berbilang peringkat yang kami buat dalam projek Vue.

1. Buat projek Vue

Kami boleh menggunakan Vue CLI untuk mencipta projek Vue:

npm install -g @vue/cli
vue create my-project

2. Pasang penghalaan Vue

Kami perlu menggunakan penghalaan Vue untuk mengurus lompatan halaman🜎

Kami perlu mengkonfigurasi penghalaan dalam projek Vue untuk melompat laluan berbeza ke halaman berbeza. Tetapkan laluan laluan ke laluan yang ditentukan dalam data menu Apabila pengguna mengklik pada item menu, mereka akan melompat dari / ke halaman yang sepadan.

3. npm install vue-router --save

Merender menu navigasi berbilang peringkat

Kita boleh menggunakan komponen Menu dalam halaman untuk memaparkan menu navigasi berbilang peringkat.

4. import Vue from 'vue';
   import VueRouter from 'vue-router';
   import Home from './views/Home.vue';
   import About from './views/About.vue';
   
   Vue.use(VueRouter);
   
   const routes = [
     {
       path: '/',
       redirect: '/home',
     },
     {
       path: '/home',
       name: 'Home',
       component: Home,
     },
     {
       path: '/about',
       name: 'About',
       component: About,
     },
   ];
   
   const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,
     routes,
   });
   
   export default router;

5. Summary

Vue menyediakan sokongan yang baik untuk membantu kami melaksanakan menu navigasi berbilang peringkat. Menggunakan komponen rekursif untuk mencipta menu berstruktur pokok boleh menjadikan kod lebih mudah dan lebih mudah difahami. Apabila mereka bentuk data menu, anda perlu memberi perhatian kepada penamaan atribut dan hubungan hierarki menu, yang membantu kami melaksanakan menu navigasi berbilang peringkat dengan lebih baik dalam komponen rekursif.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan menu navigasi berbilang peringkat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!