Vue.jsはElement-uiを使用してナビゲーションメニューを実装します

<テンプレート>
    <div class="app">
        <el-コンテナ>
        <余談>
            <navmenu></navmenu>
        </el-aside>
        <メイン>
            <ルータービュー></ルータービュー>
        </el-main>
        </el-コンテナ>
    </div>
</テンプレート>
<スクリプト>
'./navmenu' から navmenu をインポートします
エクスポートデフォルト{
    データ（） {
        戻る {
            
        }
    },
    コンポーネント:{
        ナビゲーションメニュー
    }
}
</スクリプト>
<スタイルスコープ>

</スタイル>

<テンプレート>
    <div>
        <el-行>
            <エル-コル>
                
                <el-メニュー
                    デフォルトアクティブ="$route.path"
                    ルーター
                    クラス="el-menu-vertical-demo"
                    @open="ハンドルオープン"
                    @close="ハンドルクローズ"
                >
                    <el-サブメニューインデックス="1">
                        <テンプレートスロット="タイトル">
                            <i class="el-icon-location"></i>
                            <span>ナビゲーション 1</span>
                        </テンプレート>
                        <el-メニュー項目グループ>
                            <template slot="title">グループ 1</template>
                            <el-menu-item index="/Elnav/one">オプション 1</el-menu-item>
                            <el-menu-item index="/Elnav/two">オプション 2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="グループ 2">
                            <el-menu-item index="1-3">オプション 3</el-menu-item>
                        </el-menu-item-group>
                        <el-サブメニューインデックス="1-4">
                            <template slot="title">オプション 4</template>
                            <el-menu-item index="1-4-1">オプション 1</el-menu-item>
                        </el-サブメニュー>
                    </el-サブメニュー>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  メソッド: {
    handleOpen(キー、キーパス) {
      console.log(キー、キーパス);
    },
    handleClose(キー、キーパス) {
      console.log(キー、キーパス);
    }
  },
  マウント() {
    console.log(this.$route);
  }
};
</スクリプト>
<スタイル>
</スタイル>

{
    パス: "/Elnav",
    名前:「エルナフ」   
    コンポーネント: () =>
      インポート("../components/Elnav.vue")、
      子供たち：[
        {
          パス: "/Elnav/one",
          名前: "1",   
          コンポーネント: () =>
            インポート("../components/one.vue")
        },
        {
          パス: "/Elnav/two",
          名前:「2」、   
          コンポーネント: () =>
            インポート("../components/two.vue")
        }
      ]
  }