vue 动态菜单水平菜单

最新推荐文章于 2024-04-26 16:47:03 发布

爱吃火腿的子车鸿轩

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量375

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_39143969/article/details/128902045

版权

nav-menu组件

<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" 
               >
    <span slot="title">{{navMenu.entity.alias}}</span>
  </el-menu-item>

  <!-- 此菜单下还有子菜单 -->
  <el-submenu v-if="navMenu.childs&&navMenu.entity"
              :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name">
    <template slot="title">
      <span> {{navMenu.entity.alias}}</span>
    </template>
    <!-- 递归 -->
    <NavMenu :navMenus="navMenu.childs"></NavMenu>
  </el-submenu>       
</template>

在这里插入代码片

引用nav-menu

<template>
  <div class="">
    <el-menu
      mode="horizontal"
      :default-active="activeIndex"
      router
    >
      <NavMenu :navMenus="menuData"></NavMenu>
    </el-menu>
  </div>
</template>
<script>
export default {
   data(){
     return{
      activeIndex: '/',
      menuData: [
        {
          entity: {
            id: 1,
            name: "overview",
            alias: "首页",
            path:"overview"
          }
        },
        {
          entity: {
            id: 2,
            name: "training",
            alias: "引导页",
          },
          childs: [
            {
              entity: {
                id: 9,
                name: "training-list",
                alias: "12",
                path:"training-list"
              }
            }
          ]
        }
      ]
    }
   }
}	
mounted(){
	let start = window.location.href.lastIndexOf('/');
    let path = window.location.href.slice(start+1);
    this.activeIndex = path;
    this.getAdminInfo();
}
</script>