vue3 el-menu,el-tabs实现联动

页面整体效果图

1.页面布局

首先布置好布局，页面的整体效果如下：

@import '@/assets/css/base.scss';.box{display: flex;&__left{width: 110px;}&__right{flex: 1;}}

2.侧边栏用el-menu标签，标签的选中状态与属性default-active有关，tabs标签用el-tabs,选中转态态与editableTabsValue有关，实现关联就是将2个属性的值相同即可。由于页面是封装成了子组件，所以这里el-tabs的标签属性editableTabs，editableTabsValue在pinia中进行状态管理，在进行引入。

import { defineStore } from'pinia'import {ref} from 'vue'export const tabsStore = defineStore('tabs',()=>{const editableTabsValue =ref('home')const editableTabs = ref([{title: '工作台',name: 'home',},])return {editableTabs,editableTabsValue}})

3.在index-tabs.vue中，映入Pinia里的editableTabs,editableTabsValue，在removeTab事件中不希望移除第一个标签，先进行判断是否点击的是第一个即可，changTab事件点击跳转对应路由

 import { ref} from 'vue'import { useRouter } from 'vue-router'const router = useRouter()import { tabsStore } from '@/stores/tabs.js'const tab = tabsStore()const removeTab = (targetName: string) => {if (targetName !== 'home') {//判断点击是否为工作台if (tab.editableTabsValue === targetName) {tab.editableTabs.forEach((tabs, index) => {if (tabs.name === targetName) {const nextTab = tab.editableTabs[index + 1] || tab.editableTabs[index - 1]if (nextTab) {router.push(nextTab.name)}}})}//过滤掉当前点击的tab标签tab.editableTabs = tab.editableTabs.filter((tab) => tab.name !== targetName)}}const changeTab = (targetName: string)=>{router.push(targetName)}

4.在index-sidebar.vue中，先设置好el-menu的router属性，对应的index填上跳转的路由。default-active这里命名为Eindex，在，通过watch监听事件监听路由的变化，先将tab.editableTabs中的title值取出为一个数组，再对当前route.name进行判断是否存在，不存在则添加到tab.editableTabs数组中。Eindex的值与当前路由名字保持一致即可实现tabs和menu的互联。

5.当刷新页面时，路由会只保留第一个tab标签，可能与当前路由对应不上，需要在onMounted中判断当前路由,若不等于第一个标签的路由，则tab.editableTabs数组添加该值，Eindex值也要跟当前路由保持一致。

logo影片影片管理影片分类影院影院管理用户用户管理import {useRouter,useRoute} from 'vue-router'const router = useRouter()const route = useRoute()import {watch,ref, onMounted} from 'vue'import { tabsStore } from '@/stores/tabs.js'const tab = tabsStore()const Eindex = ref()onMounted(()=>{if(route.name!=='home'){tab.editableTabs.push({title: route.meta.title,name: route.name,})tab.editableTabsValue = route.nameEindex.value=route.name}})watch(route,()=>{const arr =[]tab.editableTabs.forEach(item => {arr.push(item.title)});const res = arr.indexOf(route.meta.title)if(res==-1){tab.editableTabs.push({title: route.meta.title,name: route.name,})}tab.editableTabsValue = route.nameEindex.value=route.name})