vue elementui navMenu组件 多级导航菜单(水平、垂直)

vue elementui navmenu 多级导航菜单

路由跳转(一)

el-menu标签中的router

<el-menu router>
组件(NavMenu.vue) 中的路由跳转,:index="navMenu.entity.name"
:default-active="activeIndex"中的activeIndex默认值也要是.entity.name的值
此时菜单数据中的value 没有用到,可以删除。

注意路由变化

组件（NavMenu.vue）

<template>
  <div class="navMenu">
    <template v-for="navMenu in navMenus">
      <!-- 最后一级菜单 -->

      <el-menu-item
        v-if="!navMenu.childs && navMenu.entity"
        :key="navMenu.entity.id"
        :data="navMenu"
        :index="navMenu.entity.name"
      >
        <i :class="navMenu.entity.icon"></i>
        <span slot="title">{{ navMenu.entity.alias }}</span>
      </el-menu-item>

      <!-- 此菜单下还有子菜单 -->
      <el-submenu
        @click.native="goto(navMenu.entity.value)"
        v-if="navMenu.childs && navMenu.entity"
        :key="navMenu.entity.id"
        :data="navMenu"
        :index="navMenu.entity.name"
      >
        <template slot="title">
          <i :class="navMenu.entity.icon"></i>
          <span> {{ navMenu.entity.alias }}</span>
        </template>
        <!-- 递归 -->
        <NavMenu :navMenus="navMenu.childs"></NavMenu>
      </el-submenu>
    </template>
  </div>
</template>

<script>
export default {
  name: "NavMenu",
  props: ["navMenus"],
  data() {
    return {};
  },
  methods: {
    goto(path) {
      if (path) {
        this.$router.push(path);
      }
    },
  },
};
</script>

<style>
@import "../../assets/styles/navMenu.scss";
</style>

调用（app.vue）

<template>
  <div>
    <el-menu
      router
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :default-active="activeIndex"
    >
      <NavMenu :navMenus="menuData"></NavMenu>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
import NavMenu from "./components/navMenu/navMenu.vue";
export default {
  components: {
    NavMenu: NavMenu,
  },
  data() {
    return {
      activeIndex: "material",
      menuData: [
        {
          /* 一级*/
          entity: {
            id: 0,
            name: "material",
            // icon: "el-icon-message",
            alias: "感应式料架",
            value: "/material/index",
          },
        },
        {
          /* 一级*/

          entity: {
            id: 1,
            name: "materialControl",
            alias: "控制",
            value: "/material_control/index",
          },
          /*二级*/
        },
        {
          //一级
          entity: {
            id: 6,
            name: "materialTest",
            alias: "测试",
            value: "/material_test/index",
          },
          //二级
        },
        {
          //一级
          entity: {
            id: 40,
            name: "materialConfig",
            alias: "料架配置",
            value: "/material_config/index",
          },
          //er级
        },
        {
          //一级
          entity: {
            id: 41,
            name: "materialAdmin",
            alias: "管理后台",
            value: "/material_admin/index",
          },
          //er级
        },
      ],
    };
  },
  mounted() {
    this.$router.push("/");
  },
};
</script>

<style lang="scss">
</style>

因项目需求 我这边是采用水平导航栏
1.调用时在 app.vue 文件中 中添加 mode=”horizontal”

2.此时样式并不完全是水平样式,，因为我们的组件NavMenu.vue中嵌套了一层div（组件
template下必须有一个跟标签），导致elementui 的样式发生变化，因为它调用的方式是（ .el-menu–horizontal>.el-submenu）用了>子元素选择器。
所以要在 NavMenu.vue中添加样式

/* 水平样式 */
.el-menu--horizontal > div > .el-submenu {
  float: left;
}
/* 一级菜单的样式 */
.el-menu--horizontal > div > .el-menu-item {
  float: left;
  height: 60px;
  line-height: 60px;
  margin: 0;
  border-bottom: 2px solid transparent;
  color: #909399;
}
/* 解决下图1 下拉三角图标 */
.el-menu--horizontal > div > .el-submenu .el-submenu__icon-arrow {
  position: static;
  vertical-align: middle;
  margin-left: 8px;
  margin-top: -3px;
}
/* 解决下图2 无下拉菜单时 不对齐问题 */
.el-menu--horizontal > div > .el-submenu .el-submenu__title {
  height: 60px;
  line-height: 60px;
  border-bottom: 2px solid transparent;
  color: #909399;
}

效果：

问题

刷新页面
刷新页面时,如果路由为非active路由,激活路由与实际路由不符合(因为页面路由不变,但是activeIndex变成默认值)
App.vue中添加这段代码,刷新后重置到默认的路由

mounted(){
    this.$router.push('/')
  }

参考文章：参考文章链接，这个博主写的很清晰哦