Vue Element Admin 可能是应用最宽泛的后盾治理前端框架了，尽管技术栈曾经老了（Vue 2.0 全家桶 + npm8），但社区仍旧沉闷。

目前有个我的项目，须要把侧边栏导航换成顶导，框架官网是不反对的，调研当前，决定本人写一个顶导，暗藏现有的侧边栏。

减少顶导菜单

在 src/layout/components下，新建一个文件 TopMenu.vue：

<template>  <div class="topmenu">    <el-row>      <el-col :span="8" class="logo-container">        <span class="title">ViaBTC 后盾管理系统</span>      </el-col>      <el-col :span="16" class="menu">        <el-menu          :default-active="activeIndex2"          class="el-menu-demo"          mode="horizontal"          background-color="#324057"          text-color="#fff"          active-text-color="#ffd04b"          @select="handleSelect"        >          <el-menu-item index="1">解决核心</el-menu-item>          <el-submenu index="2">            <template slot="title">我的工作台</template>            <el-menu-item index="2-1">              <a href="#/components/split-pane">分割线</a>            </el-menu-item>            <el-menu-item index="2-2">选项2</el-menu-item>            <el-menu-item index="2-3">选项3</el-menu-item>            <el-submenu index="2-4">              <template slot="title">选项4</template>              <el-menu-item index="2-4-1">选项1</el-menu-item>              <el-menu-item index="2-4-2">选项2</el-menu-item>              <el-menu-item index="2-4-3">选项3</el-menu-item>            </el-submenu>          </el-submenu>          <el-menu-item index="3" disabled>音讯核心</el-menu-item>          <el-menu-item index="4">            <a href="https://www.ele.me" target="_blank">订单治理</a>          </el-menu-item>        </el-menu>      </el-col>    </el-row>  </div></template><script>export default {  components: {  },  data() {    return {      activeIndex: '1',      activeIndex2: '1'    }  },  computed: {  },  methods: {    handleSelect(key, keyPath) {      console.log(key, keyPath)      console.log(this.permission_routes)    },  }}</script><style lang="scss" scoped>.topmenu {  width: 100%;  height: 62px;  min-width: 600px;  background: #324057;  color: #fff;  border-bottom: 1px solid #1f2d3d;  .logo-container {    line-height: 60px;    min-width: 200px;    .logo {      height: 50px;      width: 50px;      margin-right: 5px;      vertical-align: middle;      display: inline-block;    }    .title {      vertical-align: middle;      font-size: 18px;      font-family: "Microsoft YaHei";      letter-spacing: 3px;    }  }  .menu {    .el-submenu {      // 这个用于放弃一级菜单之间的间距      padding: 0 20px;    }  }}</style>

在 src/layout/components/index.js中，import TopMenu：

...export { default as TopMenu } from './TopMenu'
留神：这里依照常规，尽管组件自身在js中是 CamelCase 的，但在 template 中，要写成 kebab-case 模式

暗藏侧边栏

Sidebar 是框架的原始左导菜单，源码在src/layout/components/Sidebar里，但批改这里的款式是不行的，须要批改src/styles/sidebar.scss文件：

  .main-container {    ...    margin-left: 0px; //之前整个页面给side留出的边距    ...  }  .sidebar-container {    ...    // 新增以下几行，彻底暗藏 Sidebar    pointer-events: none;    transition-duration: 0.3s;    transform: translate3d(-$sideBarWidth, 0, 0);  }...  .hideSidebar {    .sidebar-container {      ...      // 新增以下几行，彻底暗藏 Sidebar      pointer-events: none;      transition-duration: 0.3s;      transform: translate3d(-$sideBarWidth, 0, 0);    }    .main-container {      margin-left: 0px;    }  }

至此，曾经实现了顶导的增加和侧边栏的暗藏。当然这个顶导是动态的，如果须要像侧边栏那样依据路由变动，还要进一步编码。