vue-element-admin || バックエンド管理の 3 レベル/複数レベルのメニュー設定

図に示すように、vue-element-adminフロントエンド フレームワークに基づいて 3 レベルのメニューが実装されており、ページは第 3 レベルのメニューにのみ対応し、第 2 レベルのメニュー ページはありません。

ファイル構成。viewsフォルダーの下のファイル構造を次のように整理します。3 番目のレベルのメニューは特定の.vueファイルです。

第 1 レベルのメニューの下に、第 2 レベルのメニュー用のhxb_sys新しいルーティング ジャンプを作成します。index.vue

中にコードを書きます

<template>
 <router-view />
</template>

これらを用意したらルートを構築してオープンしますindex.js

具体的なコードとファイル パスは次のとおりです。ここで、第 2 レベルのメニューは第 1 レベルのメニューの中央にあり、children各{},第 2 レベルのメニューは で区切られており、同様に第 3 レベルのページはchildren中央にあります。第 2 レベルのメニューの

その中で、第 2 レベルのメニューの設定に注意する必要がありcomponent: () => import('@/views/hxb_sys/index')ますindex.vue。

さらに、 [常に第 2 レベルのメニューを表示する] をオンにします alwaysShow: true。オンにしないと、第 3 レベルのメニューが 1.vueページしかない場合、システムは第 2 レベルのメニューを表示しません (スキップされます)。

{
    
    
   path: '/hxb_sys',   
   component: Layout,
   redirect: '/hxb_sys/branch',
   name: 'hxBank',
   meta: {
    
    
     title: '华夏银行',
     icon: 'el-icon-s-help'
   },
   children: [
     {
    
    	// 二级菜单1
      
     },
     
     {
    
    	// 二级菜单2
       path: 'homePage',   // 首页管理
       component: () => import('@/views/hxb_sys/index'), // Parent router-view
       name: 'HomePage',
       meta: {
    
     title: '首页管理', icon: 'el-icon-s-cooperation' },
       alwaysShow: true,	// 需要设置该选项
       children: [
         {
    
    	// 三级菜单1
           path: 'category',
           component: () => import('@/views/hxb_sys/homePage/category'),
           name: 'Category',
           meta: {
    
     title: '分页列表' , icon: 'el-icon-s-operation'}
         },
         {
    
    	// 三级菜单2
           path: 'banner',
           component: () => import('@/views/hxb_sys/homePage/banner'),
           name: 'Banner',
           meta: {
    
     title: 'Banner' , icon: 'el-icon-s-operation'}
         },
       ]
     }
   ]
}

同じことが複数レベルのメニューにも当てはまります。4 レベルのメニューの 2 番目と 3 番目のレベルは中央にリンクする必要があることに注意してくださいindex.vue(試しませんでした）、component: () => import('@/views/hxb_sys/index')