[JavaScript知识库]Vue3 element-plus的el-menu和el-tanbs和el-breadcrumb的联动

问题描述：

左边的菜单栏和标签导航栏实现路由的联动需要在以下几方面做联动：

1. 激活
2. 点击tab的关闭的后的路由跳转

el-tabs中的必要操作

1. editableTabsValue是激活的tab，因此他的值为当前路由path，因此需要监听路由路径的变化，当路径发生变化立即赋值，页面就会随机渲染。
2. editableTabs是当前有的路由数组，值由piain中的 menuItems: [{ path: ‘/home’, name: ‘首页’ }]决定。
3. @tab-click="handleTabsClick"当点击tab发生路由跳转
4. @tab-remove="handleTabRemove"点击x关闭当前路由，这个方法放在了pinia中，在下面会放pinia中的代码，在这个方法里实际上是做了比较，当点击x后先跳转到现存的上一个路由或下一个，并激活当前tab

<template>
  <el-tabs
    v-model="editableTabsValue"
    type="card"
    :closable='editableTabs.length>1'
    class="demo-tabs tabs"
    @tab-click="handleTabsClick"
    @tab-remove="handleTabRemove"
  >
    <el-tab-pane
      class="tabs"
      v-for="item in editableTabs"
      :key="item.path"
      :label="item.name"
      :name="item.path"
    >
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import { ref, watch } from "vue";
import {useRouter,useRoute} from 'vue-router'
import { useMenuStore } from '@/pinia/modules/menu.pinia'

const router = useRouter()
const route = useRoute()
const editableTabsValue = ref('');
const menuStore = useMenuStore()
const editableTabs = menuStore.menuItems
const handleTabsClick = tab => {
  router.push({
    path:tab.props.name
  })
}
const handleTabRemove = tab => menuStore.removeMenuItem(tab)

watch(() => route.path,() => {
  editableTabsValue.value = route.path
  if(menuStore.menuItems.every( v => v.path !== route.path)){
    menuStore.menuItems.push({
      path:route.path,
      name:route.meta.title
    })
  }
},{ immediate:true })

</script>

el-menu中的必要操作

el-menu里只需要把属性配置好就行了

1. :default-active="route.path"决定哪个路由被选中
2. :router='true’开启路由
3. el-menu-item的index=""决定了跳转到哪个路由
4. route=“/workerInfo” 路由跳转的路径对象

<template>
  <el-scrollbar style="height: calc(100vh - 60px)">
    <el-menu
      active-text-color="rgb(77, 112, 255)"
      background-color="rgb(25, 26, 35)"
      class="el-menu-vertical-demo"
      :default-active="route.path"
      text-color="#fff"
      :router='true'
    >
      <div
        style="
          display: flex;
          position: relative;
          align-items: center;
          color: #fff;
          margin: 18px 8px 5px 8px;
        "
      >
        <img
          style="width: 50px; hegiht: 50px; margin-right: 10px"
          src="@/assets/logo-aside.png"
          alt="logo"
        />
        <h3 style="font-size:22px;">员工信息管理</h3>
      </div>
      <el-menu-item index="/home" route="/home">
        <el-icon><home /></el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><user /></el-icon>
          <span>员工管理</span>
        </template>

        <el-menu-item index="/workerInfo" route="/workerInfo">
          <template #title>
            <el-icon><location /></el-icon>
            <span>员工信息管理</span> </template
          >
          </el-menu-item>
      </el-sub-menu>

      <el-menu-item index="/permission" route="/permission">
        <el-icon><setting /></el-icon>
        <span>权限设置</span>
      </el-menu-item>
    </el-menu>
  </el-scrollbar>
</template>

面包屑的代码

只需要绑定pinia中的数组即可

 <el-breadcrumb :separator-icon="ArrowRight">
         <el-breadcrumb-item
          :to="{ path: item.path }"
          v-for="item in menuStore.menuItems"
          >{{item.name}}
          </el-breadcrumb-item>
</el-breadcrumb>

pinia中的代码

1. 这里就是tab删除时的一些操作

import { defineStore } from 'pinia'
import { nextTick, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
export const useMenuStore = defineStore('menu', {
    state: () => {
        return {
            menuItems: [{ path: '/home', name: '首页' }],
            router:useRouter(),
        }
    },
    actions: {
        async removeMenuItem(val) {   
            const router = useRouter()
            for (let i = 0; i < this.menuItems.length; i++){
                if (val === this.menuItems[i].path && this.menuItems.length>1) {
                    try {
                        this.menuItems.splice(i, 1) 
                        this.router.push({
                            path:this.menuItems[i-1]?this.menuItems[i-1].path:this.menuItems[i].path 
                        })
                     
                    } catch (error) {
                        console.log(error);
                    }
                }
            }
        }
    },
}) 

总结

当el-tab中的路由发生变化，激活的绑定会在监听route.path的watch内，一旦发生变化就会被赋值。因此只需要关心路由变化就行了，而menu的只需要绑定route就可以实现联动