当使用el-tabs时，你从其他页面回来想跳转到指定的那个tabs上

别说小李

已于 2022-04-16 16:10:17 修改

阅读量5.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 前端

于 2022-03-21 11:17:18 首次发布

本文链接：https://blog.csdn.net/qq_57558631/article/details/123630492

本文介绍了如何在前端项目中，使用Element UI的el-tabs组件，实现在子页面跳转后返回时，能够保持对应的Tab页激活状态。通过在子页面传递参数并监听路由变化，动态更新Tab的activeName，从而实现需求。同时，文中提到了可能遇到的页面刷新问题，并给出了两种解决方案：通过监听$route和利用路由元数据meta.activeName。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引用.http://t.csdn.cn/0GNfH

问题描述
1.假设tab有3个选项卡（Tab A，Tab B，Tab C），3个选项卡分别对应3个页面（A页面，B页面，C页面），
2.3个页面都可以跳转到自己的子页面（a子页面，b子页面，c子页面），在进行elementUI的tab切换时，在
3.子页面的跳转能回到相应的Tab页面。
解决思路
1.在C的子页面返回时，返回一个参数type：C
2.在Tab页面中接收参数，判断type的值，当type=“C”时，改变Tab的activeName为Tab C
代码
1）tab页面
<el-tabs v-model="activeName" @tab-click="handleClick" >
   <el-tab-pane label="A" name="a">
       <primarySkill></primarySkill>
   </el-tab-pane>
   <el-tab-pane label="B" name="b">
       <advancedSkill></advancedSkill>
   </el-tab-pane>
   <el-tab-pane label="C" name="c">
       <dictionary></dictionary>