Vue プロジェクトでマルチレベル メニューの動的な表示と選択を実装する方法

Vue プロジェクトで複数レベルのメニューの動的な表示と選択を実現する方法

Vue プロジェクトでは、動的な表示と選択を実現する一般的な方法です。マルチレベルメニューの機能が必要です。次の手順でこの機能を実現できます。具体的なコード例を示します。

ステップ 1: メニュー データの作成
まず、メニューの階層構造、名前、および対応するルーティング情報を含むメニュー データを作成する必要があります。配列を使用してメニュー データを表すことができます。各メニュー項目はオブジェクトによって表されます。オブジェクトには、メニューの名前 (名前)、ルーティング情報 (パス)、およびサブメニュー (項目) が含まれます。以下はメニュー データのサンプルです。

menuData: [
  {
    name: '首页',
    path: '/home',
    items: []
  },
  {
    name: '关于我们',
    path: '/about',
    items: []
  },
  {
    name: '产品',
    path: '/products',
    items: [
      {
        name: '产品1',
        path: '/products/product1',
        items: []
      },
      {
        name: '产品2',
        path: '/products/product2',
        items: []
      }
    ]
  }
]

ステップ 2: メニュー コンポーネントの作成
次に、メニュー データの表示に使用されるメニュー コンポーネント (Menu) を作成します。コンポーネントのテンプレートでは、v-for ディレクティブを使用してメニュー データをトラバースし、メニューの階層構造に従ってネストされた表示を実行できます。メニューを選択した効果を実現するには、router-link コンポーネントを使用し、現在のページのルーティング情報に基づいてメニュー項目が選択されているかどうかを判断します。以下はメニュー コンポーネントの例です。

<template>
  <ul>
    <li v-for="menu in menuData" :key="menu.path">
      <router-link :to="menu.path" :class="{ active: isActive(menu) }">{{ menu.name }}</router-link>
      <menu v-if="menu.items.length" :menu-data="menu.items"></menu>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    menuData: {
      type: Array,
      required: true
    }
  },
  methods: {
    isActive(menu) {
      return this.$route.path === menu.path
    }
  }
}
</script>

<style scoped>
.active {
  font-weight: bold;
}
</style>

ステップ 3: ルーティング設定でメニュー コンポーネントを使用する
ルーティング設定ファイルで、メニュー コンポーネントを導入し、routes に配置する必要があります。 このコンポーネントを配列内のレイアウトとして使用します。このようにして、各ページのレイアウト内でメニューを動的に表示することができます。以下はルーティング設定の例です。

import Vue from 'vue'
import Router from 'vue-router'
import Menu from '@/components/Menu'

Vue.use(Router)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Menu,
    children: [
      {
        path: 'home',
        component: () => import('@/views/Home')
      },
      {
        path: 'about',
        component: () => import('@/views/About')
      },
      {
        path: 'products',
        component: () => import('@/views/Products'),
        children: [
          {
            path: 'product1',
            component: () => import('@/views/Product1')
          },
          {
            path: 'product2',
            component: () => import('@/views/Product2')
          }
        ]
      }
    ]
  }
]

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

上記の 3 つの手順を通じて、Vue プロジェクトにマルチレベル メニューの動的な表示と選択機能を実装できます。メニュー コンポーネントでは、v-for を使用してメニュー データをトラバースし、router-link コンポーネントを使用してルーティング ジャンプを実行し、ルーティング情報によってメニュー項目が選択されているかどうかを判断します。現在のページの選択したメニューの効果をスタイルで制御します。

以上の内容がお役に立てば幸いです。ご質問がございましたら、お気軽にお問い合わせください。

以上がVue プロジェクトでマルチレベル メニューの動的な表示と選択を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。