Vue-cli实战项目9 顶部导航栏的实现

上一章节

Vue-cli实战项目8 主布局的实现

顶部导航栏的实现

使用Element 的 NavMenu 导航菜单组件来实现
NavMenu 导航菜单

基本实现

<el-header class="d-flex align-items-center" style="background: #545c64;">
  <!-- -->
  <a class="h5 text-light mb-0 mr-auto">UNI-ADMIN</a>
  <!-- 顶部导航栏 -->
  <el-menu
    :default-active="navBarIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="1">首页</el-menu-item>
	<el-menu-item index="1">商品</el-menu-item>
	<el-menu-item index="1">订单</el-menu-item>
	<el-menu-item index="1">会员</el-menu-item>
	<