Comment utiliser Vue pour implémenter un menu de navigation à plusieurs niveaux ?

Avec le développement d'Internet, de plus en plus de sites Web doivent mettre en œuvre des menus de navigation à plusieurs niveaux pour afficher diverses catégories et sous-catégories afin de faciliter la navigation et l'utilisation des utilisateurs. Dans le framework front-end, Vue fournit également un bon support pour nous aider à implémenter des menus de navigation à plusieurs niveaux. Cet article explique comment utiliser Vue pour implémenter un menu de navigation à plusieurs niveaux.

1. Concepts de base

Avant d'utiliser Vue pour implémenter un menu de navigation à plusieurs niveaux, nous devons comprendre quelques concepts de base :

1. Nœud (nœud) : Chaque élément de la structure arborescente est appelé un nœud.
2. Nœud racine : le nœud le plus haut de la structure arborescente est appelé nœud racine.
3. Nœud feuille : un nœud dans une structure arborescente qui n'a pas de nœuds enfants est appelé nœud feuille.
4. Nœud parent : un nœud avec des nœuds enfants est appelé nœud parent.
5. Nœud enfant : un nœud contenu par un nœud parent et qui apparaît comme son descendant direct est appelé nœud enfant.

2. Conception de la structure des données

Pour implémenter un menu de navigation à plusieurs niveaux dans Vue, nous devons définir une structure de données pour stocker les données du menu. Nous pouvons utiliser le format JSON pour stocker les données de menu. Nous devons définir les propriétés suivantes pour chaque élément de menu :

1. id : Chaque élément de menu doit avoir un identifiant unique.
2. titre : Le titre du menu.
3. icône : L'icône du menu.
4. chemin : lien vers le menu.
5. children : données du menu de niveau suivant Si le menu actuel est un nœud feuille, children est un tableau vide.

Ce qui suit est un exemple simple de données de menu à plusieurs niveaux :

[
  {
    "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. Conception de composants

Pour implémenter un menu de navigation à plusieurs niveaux dans Vue, nous pouvons utiliser des composants pour le construire. Étant donné que le menu de navigation à plusieurs niveaux est une structure arborescente, nous pouvons utiliser des composants récursifs pour créer un menu arborescent. Un composant récursif, c'est lorsqu'un composant s'appelle dans son modèle.

1. Composant Menu

Le composant Menu est notre composant racine, qui appelle le composant MenuItem pour créer des éléments de menu et définir des styles en fonction de différents niveaux.

<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. Composant MenuItem

Le composant MenuItem crée des éléments de menu en fonction des données de menu entrantes et détermine si l'élément de menu actuel a un élément de menu de niveau suivant. Si tel est le cas, le menu de niveau suivant est créé de manière récursive, sinon le menu de niveau suivant est créé de manière récursive. Le menu actuel s'affiche. L'adresse du lien de l'élément.

<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. Cas d'utilisation

Ensuite, nous utiliserons le composant de menu de navigation à plusieurs niveaux que nous avons créé dans un projet Vue.

1. Créer un projet Vue

Nous pouvons utiliser Vue CLI pour créer un projet Vue :

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

2. Installer le routage Vue

Nous devons utiliser le routage Vue pour gérer les sauts de page :

npm install vue-router --save

3. Configurer le routage Vue

Nous devons configurer le routage dans le projet Vue pour accéder à différents itinéraires vers différentes pages. Définissez le chemin de l'itinéraire sur le chemin défini dans les données du menu. Lorsque l'utilisateur clique sur l'élément de menu, il passera de/à la page correspondante.

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;

4. Rendu du menu de navigation à plusieurs niveaux

Nous pouvons utiliser le composant Menu dans la page pour afficher le menu de navigation à plusieurs niveaux.

<template>
  <div id="app">
    <menu :list="menu"></menu>
    <router-view></router-view>
  </div>
</template>

<script>
import Menu from './components/Menu.vue';

export default {
  name: 'App',
  components: {
    Menu,
  },
  data() {
    return {
      menu: [
        {
          id: 1,
          title: '首页',
          icon: 'fa fa-home',
          path: '/home',
          children: [],
        },
        {
          id: 2,
          title: '关于我们',
          icon: 'fa fa-info',
          path: '/about',
          children: [],
        },
        {
          id: 3,
          title: '产品分类',
          icon: 'fa fa-product-hunt',
          path: '',
          children: [
            {
              id: 31,
              title: '手机',
              icon: 'fa fa-mobile',
              path: '/products/mobile',
              children: [
                {
                  id: 311,
                  title: '苹果',
                  icon: 'fa fa-apple',
                  path: '/products/mobile/apple',
                  children: [
                    {
                      id: 3111,
                      title: 'iPhone 12',
                      icon: 'fa fa-gift',
                      path: '/products/mobile/apple/iphone-12',
                      children: [],
                    },
                    {
                      id: 3112,
                      title: 'iPhone 11',
                      icon: 'fa fa-gift',
                      path: '/products/mobile/apple/iphone-11',
                      children: [],
                    },
                  ],
                },
                {
                  id: 312,
                  title: '华为',
                  icon: 'fa fa-huawei',
                  path: '/products/mobile/huawei',
                  children: [
                    {
                      id: 3121,
                      title: 'Mate 40 Pro',
                      icon: 'fa fa-gift',
                      path: '/products/mobile/huawei/mate-40-pro',
                      children: [],
                    },
                    {
                      id: 3122,
                      title: 'P40',
                      icon: 'fa fa-gift',
                      path: '/products/mobile/huawei/p40',
                      children: [],
                    },
                  ],
                },
              ],
            },
            {
              id: 32,
              title: '电脑',
              icon: 'fa fa-desktop',
              path: '/products/computer',
              children: [
                {
                  id: 321,
                  title: '联想',
                  icon: 'fa fa-link',
                  path: '/products/computer/lenovo',
                  children: [
                    {
                      id: 3211,
                      title: 'ThinkPad X1',
                      icon: 'fa fa-gift',
                      path: '/products/computer/lenovo/thinkpad-x1',
                      children: [],
                    },
                    {
                      id: 3212,
                      title: 'IdeaPad 5',
                      icon: 'fa fa-gift',
                      path: '/products/computer/lenovo/ideapad-5',
                      children: [],
                    },
                  ],
                },
                {
                  id: 322,
                  title: '戴尔',
                  icon: 'fa fa-dell',
                  path: '/products/computer/dell',
                  children: [
                    {
                      id: 3221,
                      title: 'XPS 13',
                      icon: 'fa fa-gift',
                      path: '/products/computer/dell/xps-13',
                      children: [],
                    },
                    {
                      id: 3222,
                      title: 'Inspiron 14 7000',
                      icon: 'fa fa-gift',
                      path: '/products/computer/dell/inspiron-14-7000',
                      children: [],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    };
  },
};
</script>

5. Résumé

Vue fournit un bon support pour nous aider à mettre en œuvre des menus de navigation à plusieurs niveaux. L'utilisation de composants récursifs pour créer des menus arborescents peut rendre le code plus simple et plus facile à comprendre. Lors de la conception des données de menu, vous devez prêter attention à la dénomination des attributs et à la relation hiérarchique du menu, ce qui nous aide à mieux implémenter des menus de navigation à plusieurs niveaux dans les composants récursifs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!