Vue cliスキャフォールディングを使用して、パブリックルーティングを実装します。たとえば、メニューバーはパブリックパーツです。

要件分析
実際のVue開発では、ヘッダーメニューバーコンポーネントのオプションをクリックします。ルートにジャンプしても、メニューバーは引き続き存在し、クリックしたメニューオプションはアクティブな状態です。
たとえば、図1を参照してください。ユーザー管理をクリックし、ユーザー管理ルートにジャンプして、メニューバーを変更しないでおく場合、図2のような効果は必要ありません。

図1

図2

解決策
は、App.vueに保存する必要のあるパブリックコンポーネント（webpackによって自動的に作成され、保存された元のラベルはVueロゴです）を記述し、元のラベルを削除してメニューバーに配置することです（例）コードは次のように表示されます。

<template>
  <div id="app">
    <el-container>
      <el-header>
        <!--导航菜单-->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="/index">主页</el-menu-item>
          <el-menu-item index="/users" >用户管理</el-menu-item>

          <el-menu-item index="/msgs" >消息中心</el-menu-item>
          <el-menu-item index="orders">订单管理</el-menu-item>
        </el-menu>
        <div class="line"></div>

      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
    
    
  name: 'App',
  data() {
    
    
    return {
    
    
      activeIndex: '/index',
    };
  },
  methods: {
    
    
    handleSelect(key, keyPath) {
    
    
      console.log(key, keyPath);
      this.$router.push(key);
    }
  }
}
</script>

<style>

</style>

レンダリングショー