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就可以实现联动

  • 3
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大鲤余

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值