elementui+vue实现菜单导航跟main区域的tabs联动效果

浅浅的花香味﹌ 2022-12-18 10:53 388阅读 0赞

## elementui+vue实现菜单导航跟main区域的tabs联动效果 ##

**文章目录**

*  1.前言
 *  2.实现效果
 *  3.解决过程
 *  4.具体代码

#### 1.前言 ####

vue小白，做的项目用的是elementui+vue实现，在项目进行到中期时，发现对于系统还是有一些不足的，vue用的是vuex进行路由跳转，但是每次跳转都会刷新页面，重新加载，就算控制路由上写了children，也算是重新加载的，所以问题就是怎么实现菜单导航跟页面的main区域的关联，用tabs联动起来，实现可以在main区域上看到我们之前点开过的页面，提示可以回到那个页面，同时保留当前页面。

#### 2.实现效果： ####

![在这里插入图片描述][20201026162645764.gif_pic_center]

#### 3.解决过程 ####

在网上看了很多大佬写的文章，可能我太菜了，看了之后完全看不懂，代码放到项目里不是这个问题就是那个问题。。。。。  
附大佬文章：  
如果觉得我写的不适合，可以参考大佬写的文章：

[vue+element-ui点击导航栏动态添加对应的tabs，并可删除][vue_element-ui_tabs]

我是根据这篇文章，结合我自己的项目进行修改的，可能没有那么完善，但是只是满足我自己项目的需求，同时我也看得懂。

#### 4.具体代码 ####

*  home页面：因为全部的代码实在是太多，不仅仅是导航栏跟tabs的两栋，还有我项目的一些具体功能代码，所以我没有全部放上来，只放了这个效果的全部代码。

html部分：

<el-main>
         <el-tabs type="card" @tab-remove="removeTab" @tab-click="tabClick">
             <el-tab-pane v-for="item in tabsItem" :key="item.name" :label="item.title" :name="item.name" :closable="item.closable" :ref="item.ref">
             </el-tab-pane>
         </el-tabs> 
         
         <transition name="fade" mode="out-in">
             <keep-alive>
                 <router-view v-if="$route.meta.keepAlive"></router-view>
             </keep-alive>
         </transition>
         <router-view v-if="!$route.meta.keepAlive"></router-view>             
     </el-main>

js部分：

同时需要对原来的项目路由配置进行一些修改

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaXh1YW5qaQ_size_16_color_FFFFFF_t_70_pic_center]  
改完之后就差不多了，代码写就到这里。

#### 如果有写错或者不足的地方，还请在评论区指正！！我会及时修改！！！！！！ ####

#### 请尊重原创，如需转载，还请注明原作者，原文链接，谢谢啦！！！ ####

[20201026162645764.gif_pic_center]: /images/20221122/7db302a7c1814904a461dfba7ed0f48d.png
[vue_element-ui_tabs]: https://blog.csdn.net/hjx154954264/article/details/104799141?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-20-104799141.nonecase&utm_term=element%E7%9A%84%E8%8F%9C%E5%8D%95%E4%B8%8Etabs&spm=1000.2123.3001.4430
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaXh1YW5qaQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/32dd85157f9f40f18541f0888362a4b8.png