Vueはメニューナビゲーションを実装するためにelement-uiを使用します

npm インストール vue-router --save
npm をインストールします。

モジュール.エクスポート = {
    保存時にlint: 偽
}

'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。

'vue-router' から VueRouter をインポートします。
'element-ui' から ElementUI をインポートします。
'element-ui/lib/theme-chalk/index.css' をインポートします。


'./components/movie.vue' からムービーをインポートします。
'./components/novel.vue' から novel をインポートします。

Vue.config.productionTip = false

Vue.use(VueRouter)
Vue.js の ElementUI 要素をオーバーライドします。

定数ルート = [
  { パス: '/movie'、コンポーネント: movie },
  { パス: '/novel'、コンポーネント: novel }
]

// 3. ルーター インスタンスを作成し、`routes` 構成を渡します。// 他の構成パラメータを渡すこともできますが、今はシンプルにしておきましょう。
const ルーター = 新しい VueRouter({
  mode: 'history', //h5 mode ルート // (省略形) ルート: ルートと同等
})

新しいVue({
  レンダリング: h => h(App),
  ルーター
}).$mount('#app')

<テンプレート>
  <div>    
    映画ページ</div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: '映画' 
}
</スクリプト>


<スタイルスコープ>

</スタイル>

<テンプレート>
  <div>
    小説ページ</div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: '小説'  
}
</スクリプト>
<スタイルスコープ>

</スタイル>

<テンプレート>
  <div id="ナビゲーションメニュー">
    <el-メニュー
      :default-active="アクティブインデックス"
      クラス="el-menu-demo"
      モード="水平"
      @select="ハンドル選択"
      ルーター
    >
      <!-- 
      <el-menu-item index="1">映画</el-menu-item>
      <el-menu-item index="2">小説</el-menu-item>
      <el-サブメニューインデックス="3">
        <template slot="title">私のワークベンチ</template>
        <el-menu-item index="3-1">オプション 1</el-menu-item>
        <el-menu-item index="3-2">オプション 2</el-menu-item>
        <el-menu-item index="3-3">オプション 3</el-menu-item>
        <el-submenu index="3-4">
          <template slot="title">オプション 4</template>
          <el-menu-item index="3-4-1">オプション 1</el-menu-item>
          <el-menu-item index="3-4-2">オプション 2</el-menu-item>
          <el-menu-item index="3-4-3">オプション 3</el-menu-item>
        </el-サブメニュー>
      </el-サブメニュー> 
      -->

      <template v-for="navMenuData 内の項目">
        <el-menu-item :index="item.index" v-if="!item.child">{{item.name}}</el-menu-item>

        <el-submenu :index="item.index" v-if="item.child">
          <テンプレート スロット="title">{{item.name}}</テンプレート>
          <template v-for="item.child 内の item2">
            <el-menu-item :index="item2.index">{{item2.name}}</el-menu-item>
          </テンプレート>
        </el-サブメニュー>
      </テンプレート>
    </el-menu>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: "NavMenu",
  データ（） {
    戻る {
      アクティブインデックス: "映画",     
      ナビゲーションメニューデータ:
        { インデックス: "映画"、名前: "映画" },
        { インデックス: "小説"、名前: "小説" },
        {
          インデックス: "2",
          名前:「私のワークベンチ」
          子: [{ インデックス: "2-1", 名前: "オプション 1" },{ インデックス: "2-2", 名前: "オプション 2" },{ インデックス: "2-3", 名前: "オプション 3" }]
        },
       
      ]
    };
  },
  メソッド: {
    ハンドル選択(キー、キーパス) {
      console.log(キー、キーパス);
    }
  },
  マウントされた(){         
      コンソールログ(this.activeIndex)        
      console.log(this.$route.path)      
      this.activeIndex = this.$route.path.substring(1、this.$route.path.length);     

  }
};
</スクリプト>

<スタイルスコープ>
</スタイル>

<テンプレート>
  <div id="アプリ">
    <el-コンテナ>
      <el-ヘッダー>
        <ナビゲーションメニュー></ナビゲーションメニュー>
      </el-header>
      <メイン>
         <router-view></router-view> <!--ルート終了-->
      </el-main>
      <el-footer>フッター</el-footer>
    </el-コンテナ>
  </div>
</テンプレート>

<スクリプト>
「./components/NavMenu.vue」からNavMenuをインポートします。

エクスポートデフォルト{
  名前:「アプリ」、
  コンポーネント:
    ナビゲーションメニュー
  }
};
</スクリプト>

<スタイルスコープ>
.el-ヘッダー、
.el-フッター{
  背景色: #b3c0d1;
  色: #333;
  テキスト配置: 中央;
  高さ: 100px;
  パディング: 0px;
}

.el-main {
  背景色: #e9eef3;
  色: #333;
  テキスト配置: 中央;
  行の高さ: 160px;
}

</スタイル>