vue+element-uiはヘッドナビゲーションバーコンポーネントを実装します

npm インストール要素-ui

<テンプレート>
  <div class="header">
    <div class="img">
      <img src="@/assets/image/index/logo.png" alt="">
    </div>
    <el-メニュー
      :default-active="this.$route.path"
      クラス="el-menu-demo"
      モード="水平"
      @select="ハンドル選択"
      ルーター
      背景色="#fff"
      テキストカラー="#333"
      アクティブテキストカラー="#0084ff"
      スタイル="flex:1"
    >
      <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
        <テンプレートスロット="タイトル">
          <span> {{ item.navItem }}}
        </テンプレート>
      </el-menu-item>
    </el-menu>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    データ（） {
    戻る {
        ナビリスト:[
            {name:'/home', navItem:'ホーム'},
            {name:'/home/classRoom',navItem:'私のクラス'},
            {name:'/home/course',navItem:'マイコース'},
            {name:'/home/exam',navItem:'試験を作成する'},
            {name:'/home/practice',navItem:'練習を作成する'},
        ]
                      
    }
  },
  メソッド: {
    ハンドル選択(キー、キーパス) {
      }
  }
}
</スクリプト>

<スタイル>
.el-メニュー項目{
  フォントサイズ: 18px !重要;
}
.el-menu-item.is-active {
    色: #ea5b2c !重要;
    フォントサイズ: 18px !重要;
}
.el-menu--horizo​​ntal>.el-menu-item.is-active {
  下部境界線: 2px 実線 #ea5b2c !重要;
}
</スタイル>
<style lang="scss" スコープ>
.ヘッダー{
  ディスプレイ: フレックス;
  幅: 100%;
  .img {
    背景: #ffffff;
    下境界線: 実線 1px #e6e6e6;
    画像 {
      高さ:50px;
      パディング:10px;
    }
  }
}
</スタイル>