Wie implementiert man mit Vue ein mehrstufiges Navigationsmenü?

Mit der Entwicklung des Internets müssen immer mehr Websites mehrstufige Navigationsmenüs implementieren, um verschiedene Kategorien und Unterkategorien anzuzeigen und den Benutzern das Durchsuchen und Verwenden zu erleichtern. Im Frontend-Framework bietet Vue auch eine gute Unterstützung, um uns bei der Implementierung mehrstufiger Navigationsmenüs zu helfen. In diesem Artikel wird erläutert, wie Sie mit Vue ein mehrstufiges Navigationsmenü implementieren.

1. Grundkonzepte

Bevor wir Vue zum Implementieren eines mehrstufigen Navigationsmenüs verwenden, müssen wir einige Grundkonzepte verstehen:

1. Knoten (Knoten): Jedes Element in der Baumstruktur wird als Knoten bezeichnet.
2. Wurzelknoten: Der oberste Knoten in der Baumstruktur wird Wurzelknoten genannt.
3. Blattknoten: Ein Knoten in einer Baumstruktur, der keine untergeordneten Knoten hat, wird als Blattknoten bezeichnet.
4. Übergeordneter Knoten: Ein Knoten mit untergeordneten Knoten wird als übergeordneter Knoten bezeichnet.
5. Untergeordneter Knoten: Ein Knoten, der in einem übergeordneten Knoten enthalten ist und als dessen direkter Nachkomme erscheint, wird als untergeordneter Knoten bezeichnet.

2. Datenstrukturdesign

Um ein mehrstufiges Navigationsmenü in Vue zu implementieren, müssen wir eine Datenstruktur zum Speichern der Menüdaten definieren. Wir können das JSON-Format zum Speichern von Menüdaten verwenden. Wir müssen für jeden Menüpunkt die folgenden Eigenschaften definieren:

1. id: Jeder Menüpunkt muss eine eindeutige ID haben.
2. Titel: Der Titel des Menüs.
3. Symbol: Das Symbol des Menüs.
4. Pfad: Link zum Menü.
5. Kinder: Daten des Menüs der nächsten Ebene. Wenn das aktuelle Menü ein Blattknoten ist, sind Kinder ein leeres Array.

Das Folgende ist ein einfaches Beispiel für mehrstufige Menüdaten:

[
  {
    "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. Komponentendesign

Um ein mehrstufiges Navigationsmenü in Vue zu implementieren, können wir Komponenten verwenden, um es zu erstellen. Da es sich bei dem mehrstufigen Navigationsmenü um eine Baumstruktur handelt, können wir rekursive Komponenten verwenden, um ein baumstrukturiertes Menü zu erstellen. Eine rekursive Komponente liegt vor, wenn sich eine Komponente innerhalb ihrer Vorlage selbst aufruft.

1. Menükomponente

Die Menükomponente ist unsere Stammkomponente, die die MenuItem-Komponente aufruft, um Menüelemente zu erstellen und Stile entsprechend verschiedenen Ebenen festzulegen.

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

MenuItem-Komponente erstellt Menüelemente basierend auf den eingehenden Menüdaten und bestimmt, ob das aktuelle Menüelement ein Menüelement der nächsten Ebene hat. Wenn ja, wird das Menü der nächsten Ebene rekursiv erstellt Das aktuelle Menü wird angezeigt. Die Linkadresse des Elements.

<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. Anwendungsfälle

Als nächstes verwenden wir die mehrstufige Navigationsmenükomponente, die wir in einem Vue-Projekt erstellt haben.

1. Create Vue Project

Wir kann Vue CLI verwenden, um ein VUE -Projekt zu erstellen:

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

2. install Vue Routing
Wir müssen das Routing im Vue-Projekt konfigurieren, um verschiedene Routen zu verschiedenen Seiten zu überspringen. Stellen Sie den Pfad der Route auf den in den Menüdaten definierten Pfad ein. Wenn der Benutzer auf den Menüpunkt klickt, springt er von/zur entsprechenden Seite.

npm install vue-router --save

Mehrstufiges Navigationsmenü rendern

3. Wir können die Menükomponente auf der Seite verwenden, um mehrstufiges Navigationsmenü zu rendern.

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

Vue bietet gute Unterstützung bei der Implementierung mehrstufiger Navigationsmenüs. Die Verwendung rekursiver Komponenten zum Erstellen baumstrukturierter Menüs kann den Code einfacher und verständlicher machen. Beim Entwerfen von Menüdaten müssen Sie auf die Benennung von Attributen und die hierarchische Beziehung des Menüs achten, was uns hilft, mehrstufige Navigationsmenüs besser in rekursiven Komponenten zu implementieren.

Das obige ist der detaillierte Inhalt vonWie implementiert man mit Vue ein mehrstufiges Navigationsmenü?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!