ホームページ > 記事 > ウェブフロントエンド > Vue を使用してマルチレベル ナビゲーション メニューを実装するにはどうすればよいですか?
Vue を使用してマルチレベル ナビゲーション メニューを実装するにはどうすればよいですか?
- WBOYオリジナル
- 2023-06-25 09:13:303228ブラウズ
インターネットの発展に伴い、ユーザーの閲覧と使用を容易にするために、さまざまなカテゴリやサブカテゴリを表示するマルチレベルのナビゲーション メニューを実装する必要がある Web サイトがますます増えています。フロントエンド フレームワークでは、Vue はマルチレベル ナビゲーション メニューの実装を支援する優れたサポートも提供します。この記事では、Vue を使用してマルチレベル ナビゲーション メニューを実装する方法を紹介します。
1. 基本概念
Vue を使用してマルチレベル ナビゲーション メニューを実装する前に、いくつかの基本概念を理解する必要があります:
- ノード (ノード): ツリー構造体の各要素はノードと呼ばれます。
- ルート ノード (ルート ノード): ツリー構造の最上位のノードをルート ノードと呼びます。
- リーフ ノード: ツリー構造内に子ノードを持たないノードは、リーフ ノードと呼ばれます。
- 親ノード: 子ノードを持つノードは親ノードと呼ばれます。
- 子ノード: 親ノードに含まれ、その直系の子孫として現れるノードは、子ノードと呼ばれます。
2. データ構造の設計
Vue でマルチレベル ナビゲーション メニューを実装するには、メニュー データを保存するデータ構造を定義する必要があります。 JSON 形式を使用してメニュー データを保存できます。各メニュー項目に対して次のプロパティを定義する必要があります:
- id: 各メニュー項目には一意の ID が必要です。
- title: メニューのタイトル。
- icon: メニューのアイコン。
- パス: メニューリンク。
- children: 次のレベルのメニューのデータ 現在のメニューがリーフ ノードの場合、children は空の配列です。
以下は簡単なマルチレベル メニュー データの例です:
[
{
"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. コンポーネントの設計
Vue でマルチレベル ナビゲーション メニューを実装するには、次のことができます。コンポーネントを使用して構築します。マルチレベル ナビゲーション メニューはツリー構造であるため、再帰コンポーネントを使用してツリー構造のメニューを作成できます。再帰コンポーネントとは、コンポーネントがそのテンプレート内でそれ自体を呼び出すことです。
- Menu コンポーネント
Menu コンポーネントはルート コンポーネントであり、MenuItem コンポーネントを呼び出してメニュー項目を作成し、さまざまなレベルに応じてスタイルを設定します。
<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>- MenuItem コンポーネント
MenuItem コンポーネントは、受信メニュー データに基づいてメニュー項目を作成し、現在のメニュー項目に次のレベルのメニュー項目があるかどうかを判断します。 , 次に、次のレベルのメニューが再帰的に作成されます。それ以外の場合は、現在のメニュー項目のリンク アドレスが表示されます。
<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. 使用例
次に、Vue プロジェクトで作成したマルチレベル ナビゲーション メニュー コンポーネントを使用します。
- Vue プロジェクトの作成
Vue CLI を使用して Vue プロジェクトを作成できます:
npm install -g @vue/cli vue create my-project
- Vue ルーティングのインストール
ページ ジャンプを管理するには Vue ルーティングを使用する必要があります:
npm install vue-router --save
- Vue ルーティングの構成
Vue プロジェクトでルーティングを構成して、異なるルーティングを分離する必要があります。別のページにジャンプします。ルートのパスをメニューデータで定義されたパスに設定し、ユーザーがメニュー項目をクリックすると、 / から対応するページにジャンプします。
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;- マルチレベル ナビゲーション メニューのレンダリング
ページ内の Menu コンポーネントを使用して、マルチレベル ナビゲーション メニューをレンダリングできます。
<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. 概要
Vue は、マルチレベル ナビゲーション メニューの実装を支援する優れたサポートを提供します。再帰コンポーネントを使用してツリー構造のメニューを作成すると、コードがよりシンプルで理解しやすくなります。メニュー データを設計するときは、属性の命名とメニューの階層関係に注意する必要があります。これは、再帰コンポーネントでマルチレベル ナビゲーション メニューをより適切に実装するのに役立ちます。
以上がVue を使用してマルチレベル ナビゲーション メニューを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。