el-menu和el-tabs联动+el-tabs重复请求踩坑

最新推荐文章于 2024-08-14 10:05:56 发布

N_ora

最新推荐文章于 2024-08-14 10:05:56 发布

阅读量2.3k

点赞数 5

分类专栏：笔记文章标签：列表 vue

本文链接：https://blog.csdn.net/qq_33359745/article/details/116736078

版权

本文介绍了在Vue项目中如何实现el-menu侧边菜单与el-tabs标签页的联动效果，同时讨论了一个常见问题：切换标签页时可能会导致请求被重复发送。为了解决这个问题，关键在于在切换路由时正确判断并仅渲染当前选中的tab，防止多次触发请求。

摘要由CSDN通过智能技术生成

通过使用el-menu和el-tabs联动来实现效果如下：
打了马赛克，大概说一下，左侧菜单栏，右侧标签页，点击标签页跳转不同的菜单
在这里插入图片描述
相关代码：

// 数据注释
// 0.menuTitle 是菜单数据 因为有一级和二级菜单，形式为 obj:{level1:[{}],level2:[{}]}
// 1.使用router 和 :default-active="$route.path" 自动识别路由，标记菜单项
// 2. isCollapse 通过个人需求实现是否折叠
// 3. 菜单项 绑定index为路由：:index="level1.url"
// 4.选择菜单项后触发 handleSelect
<el-menu
      :unique-opened="true"
      ref="leftMenu"
      class="el-menu-vertical-demo" router :default-active="$route.path"  :collapse="isCollapse" @select="handleSelect">
      <el-menu-item v-for="(level1,index1) in menuTitle.level1" :key="`level1-${index1}`" :index="level1.url">
           <i :class="level1.icon