element使用tabs+navmenu完成后台首页菜单导航联动_elementplus如何与导航菜单同步-CSDN博客

博客介绍了使用Vue实现菜单与Tabs嵌套组件的功能。开启el-menu的router模式，根据官网结构改造菜单，配置菜单项路由。右侧内容区用tabs嵌套动态组件，监听路由变化切换子组件页面，还介绍了tab点击、一级菜单展开及tab删除的监听处理。

首先上图给大家看看实现效果:

然后直接上核心代码:

      <!-- 左侧菜单栏 -->
      <div class="aside">
        <el-menu
          class="menu"
          :default-active="$route.path"
          @open="handleOpen"
          @close="handleClose"
          router
        >
          <template v-for="(item, index) in menu">
            <!-- 遍历生成菜单的时候根据对象是否有subMenu来判断是否有二级菜单,没有就直接生成一级菜单 -->
            <el-submenu
              v-if="item.subMenu"
              :index="item.subMenu[0].path"
              :key="index + '-Susuk'"
            >
              <template slot="title">
                <span slot="title">{
  
  { item.title }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  v-for="item2 in item.subMenu"
                  :key="item2.id"
                  :index="item2.path"
                  >{
  
  { item2.title }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item v-else :index="item.path" :key="index + '-Suk'">{
  
  {
              item.title
            }}</el-menu-item>
          </template>
        </el-menu>
      </div>
      <!-- 右侧内容区 -->
      <div class="content">
        <el-tabs
          v-model="tabsValue"
          type="card"
          closable
          @tab-remove="removeTab"
          @tab-click="tabClick"
        >
          <el-tab-pane
            v-for="item in tabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
            <component :is="item.component"></component>
          </el-tab-pane>
        </el-tabs>
      </div>

首先我们要开启el-menu的router模式,这样index填写的就是我们的路由路径,点哪个菜单就会跳转到对应的路由: