vue構成ファイルはルーティングとメニューインスタンスコードを自動的に生成します

{
  "名前": "ルータ構成",
  「メニュー」: [{
    "id": "1", //ルートID、繰り返すことはできません"name": "home", //ルート名"path": "/homePage", //ルートパス"label": "Home", //メニュータイトル"selected": true, //デフォルトで選択されています"icon": "el-icon-monitor", //メニュー表示アイコン"open": true, //デフォルトで開いています"component": "homePage/homePage.vue", //コンポーネントルート"children": [ //サブメニュー {
        "id": "3",
        "名前": "getCover",
        "パス": "/getCover",
        "label": "カバーキャプチャ",
        「選択済み」: false、
        "アイコン": "el-icon-scissors",
        「開く」: 偽、
        "コンポーネント": "getCover/getCover.vue",
        "子供たち"： []
      }
    ]
  },{
    "id": "2",
    "名前": "テストページ",
    "パス": "/testPage",
    "ラベル": "テスト",
    「選択済み」：偽、
    "アイコン": "el-icon-setting",
    「開く」: 偽、
    "コンポーネント": "test/test.vue",
    "子供たち"： []
  },{
    "id": "5",
    "名前": "テストメニュー",
    "パス": "/testMenu",
    "label": "メニューテスト",
    「選択済み」：偽、
    "アイコン": "el-icon-setting",
    「開く」: 偽、
    "コンポーネント": "testMenu/testMenu.vue",
    "子供たち"： []
  }]
}

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。
「element-ui/src/locale/lang/ro」からroをインポートします。
Vue.use(VueRouter)
//設定ファイルrouter.jsonを導入する
routerMenu を require('@/config/router.json'); に設定します。
ルーターメニュー = routerMenu.menu;
メニューを[]にします。
//ルーティングを設定する let formatRoute = function (routerMenu,menu){
  for(let i = 0; i < routerMenu.length; i++){
    temp = {とする
      パス: routerMenu[i].path,
      名前: routerMenu[i].name,
      // require を使用してコンポーネントをインポートすると、コンポーネントは異なる js ファイルにパッケージ化されることに注意してください。これらは必要に応じて読み込まれます。この js ファイルは、ルート URL にアクセスしたときにのみ読み込まれます。
      コンポーネント: 解決 => require([`@/views/${routerMenu[i].component}`], 解決)
    };
    menu.push(temp);
    ルータメニュー[i].children && ルータメニュー[i].children.length > 0 の場合 {
    //サブメニュールートを再帰的に生成する formatRoute(routerMenu[i].children,menu);
    }
  }
}
//初期化 formatRoute(routerMenu,menu);
//リダイレクト設定 constroutes = [
  {
    パス： '/'、
    リダイレクト: '/homePage'
  },
]
//生成されたルーティングファイルをプッシュします for(let i = 0; i < menu.length; i++)
  ルートをプッシュします(メニュー[i]);
  
const ルーター = 新しい VueRouter({
  ルート
})

デフォルトルーターをエクスポートする

<テンプレート>
  <div id="左メニュー">

  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: "左",
  データ（）{
    戻る {
      メニュー：[]
    }
  },
  方法:{
  //ルーティングIDでノードを検索する findNodeById(node,id){
      for(let i = 0; i < node.length; i++){
        if(id == ノード[i].id){
          ノード[i].selected = true;
          if(ノード[i].children && ノード[i].children.length > 0){
            ノード i の子ノードを id で見つけます。
          }
          ノード[i].open = !ノード[i].open;
          this.$route.path !== node[i].path の場合、 this.$router.push(node[i].path);
        }それ以外{
          ノード[i].selected = false;
          if(ノード[i].children && ノード[i].children.length > 0){
            ノード i の子ノードを id で見つけます。
          }それ以外{

          }
        }
      }
    },
    //メニューノードを選択する chooseNode(id){
      this.findNodeById(this.menu,id);
      domTree = this.generatorMenu(this.menu,'',0) とします。
      leftMenu を document.getElementById('leftMenu') とします。
      左メニュー.innerHTML = domTree;
    },
    //メニューディレクトリを動的に生成する generatorMenu(menu,temp,floor){
      for(let i = 0; i < menu.length; i++){
        temp += `<div style="width: max-content">
                    <div class="menuOption" onclick="chooseNode(${menu[i].id})"
                            スタイル="テキストインデント: ${floor}em;
                            背景色: ${menu[i].selected?'アクアマリン':''};
                            カーソル: ポインタ;
                            上マージン: 0.3rem;>
                        <i class="${menu[i].icon}"></i>
                        ${menu[i].label}`
        if(!menu[i].open && menu[i].children && menu[i].children.length > 0){
          温度 += `<i style="margin-left: 1rem" class="el-icon-arrow-down"></i>`
        }それ以外{
          メニュー[i].open && メニュー[i].children && メニュー[i].children.length > 0 の場合{
            温度 += `<i style="margin-left: 1rem" class="el-icon-arrow-up"></i>`
          }
        }
        温度 += `</div>`
        if(menu[i].open && menu[i].children && menu[i].children.length != 0){
          temp = this.generatorMenu(menu[i].children,temp,floor+1);
        }
        温度 += `</div>`
      }
      温度を返します。
    }
  },
  作成された() {

  },
  マウント() {
    ウィンドウを選択します。
    メニューを[]にします。
    //ルーティング メニュー構成ファイルを取得します。const router = require('@/config/router.json');
    メニュー = router.menu;
    this.menu = メニュー;
    domTree = this.generatorMenu(menu,'',0) とします。
    leftMenu を document.getElementById('leftMenu') とします。
    左メニュー.innerHTML = domTree;
  }
}
</スクリプト>

<スタイルスコープ>
  #左メニュー{
    最小高さ: calc(100vh - 44px - 1rem);
    背景色: コーンフラワーブルー;
    テキスト配置: 左;
    パディング: 0.5rem 1rem;
    フォントサイズ: 大きい;
    フォントの太さ: 太字;
  }
  .選択されたM{
    背景色: アクアマリン;
  }
  .menuOption{
    カーソル: ポインタ;
  }
</スタイル>