el-tags菜单栏

el-tags菜单栏是通过使用pinia中的数组绑定来实现的。在代码中，使用了el-breadcrumb组件来展示面包屑导航栏，其中的el-breadcrumb-item组件通过遍历menuStore.menuItems数组来生成每个菜单项。

点击左侧菜单栏时，面包屑实时更新。如果所点击的菜单在面包屑中存在，那么需要缓存，如果不存在则重新加载。面包屑的tab切换也需要进行缓存，并且在关闭一个选项卡时需要更新tabslist。如果有多级路由，需要对路由进行扁平化处理以便使用keepalive。

在el-tab中的路由发生变化时，激活的绑定会在监听route.path的watch内被赋值。因此，只需要关注路由的变化就可以实现菜单栏的联动。将menu绑定到route即可实现这个效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Vue3 element-plus的el-menu和el-tanbs和el-breadcrumb的联动](https://blog.csdn.net/m0_47195133/article/details/125251104)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [vue2使用keep-alive缓存已打开过的菜单，使用el-tabs展示面包屑路由。](https://blog.csdn.net/Eleuuuuy/article/details/124670244)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]