vebn菜单修改为一级菜单+联动二级

chocolate_nan

已于 2022-11-16 16:46:22 修改

阅读量717

点赞数

分类专栏： vue 工具文章标签： javascript vue.js 前端

于 2022-11-16 16:41:01 首次发布

本文链接：https://blog.csdn.net/chocolate_nan/article/details/127886800

版权

本文介绍了如何在Vue.js项目中将vebn菜单修改为一级菜单并实现与二级菜单的联动效果。步骤包括：划分顶部、左侧菜单和tabs页，将顶部设为一级菜单，左侧菜单与顶部联动显示二级菜单，同时tabs页与顶部、左侧菜单联动。具体实现涉及处理菜单数据、使用localStorage存储选中的一级菜单值，以及监听一级菜单变化以更新左侧二级菜单。

摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述
原菜单

接下来就是来理下思路

1.分为三部分，顶部，左侧，tabs页
2.顶部修改为一级菜单；
3.左侧菜单和顶部一级菜单联动，显示二级菜单；
4.tabs页和顶部，左侧联动。

接下来就是要上手改起来了

1.一级菜单先来，找到目录

在这里插入图片描述

1.将获取到的全部菜单，处理成可用的一级菜单
遍历所有菜单，添加hidePathForChildren属性，并删除隐藏菜单（比如：首页等）。
2.点击一级菜单时，将值存储到localStorage

在这里插入图片描述

<template>
  <div :class="[prefixCls, `${prefixCls}--${theme}`]">
    <a-menu mode="horizontal" :theme="theme" @click="menuClick" v-model:selectedKeys="selectedKeys">
      <template v-for="item in routes" :key="item.path">
        <template v-if="item.hidePathForChildren">
          <a-menu-item :key="item.path">
            <Icon :icon="item.icon" />
            {
  { item.t