Vue3实现动态切换Menu

Vue3动态切换Menu的相关问题

项目中需要使用一个顶部导航栏和侧边栏，顶部导航栏来控制侧边栏的生成，于是需要动态切换

我是直接根据路由文件来控制整个菜单的生成结构，首先定义一下顶部导航栏的信息，他的key需要与路由的顶级name匹配，方便切换

// APP.vue

// 顶部导航栏信息
const navBarMenuList = [
  {
    name: 'Home',
    title: '应用分析'
  },

  {
    name: 'AppManage',
    title: '应用管理'
  }
]

路由文件中，给每个需要选中的菜单项添加上activeMenu，使用path作为值，同时这里我的需求中需要事件管理不展示子菜单，所以额外配置了一个showchild

export default [
  {
    path: '/appManage',	// 顶级路由(请让我这样简称)
    redirect: '/appManage/gameBaseInfo',
    name: 'AppManage',	// 这里与navBarMenu的name对应
    children: [
      {
        path: 'gameBaseInfo',	// 次级路由
        name: 'GameBaseInfo',
        icon: 'Memo',
        cnName: '基本信息',
        component: () => import('@/views/AppManage/BaseInfoView.vue'),
        meta: {
          activeMenu: 'gameBaseInfo',	// 用于给菜单的index项赋值，同时对应这个路由的地址
          needKeepAlive: true
        }
      },
      {
        path: 'eventManage',
        name: 'EventManage',
        icon: 'Management',
        cnName: '事件管理',
        showChild: false,	// 是否需要展示子菜单
        component: () => import('@/views/AppManage/EventManageView.vue'),
        redirect: '/appManage/eventManage/eventTable',
        meta: {
          needKeepAlive: true,
          activeMenu: 'eventManage'
        },
        children: [
          {
            path: 'eventDetail/:eventID?', // 子路由
            name: 'EventDetail',
            component: () => import('@/views/AppManage/EventDetailsView.vue')
          },
          {
            path: 'eventTable',
            name: 'EventTable',
            component: () => import('@/views/AppManage/EventMangeTable.vue')
          }
        ]
      }
    ]
  }
]

菜单的跳转不使用el-menu自带的router模式，自己使用route-link来实现跳转，跳转的路由则直接是由:顶级路由 + 次级路由+子路由形成。default-active一定要开启，以此来作为我们切换的根据，然后根据路由文件中有无children来判断是否生成子菜单。每个菜单项的index则对应路由文件中的activemenu,当路由切换后，defaultactive会自动计算出当前应该选中哪个菜单项。判断条件中的item.showchild是因为我有些菜单需要不展示子菜单。

<script lang='ts' setup>
// 顶部导航栏的选中情况
const navBarSelect = ref<string>('Home') 

// 路由信息，同时也是侧边栏生成的依据信息
const menuList = reactive<Array<any>>([])

// 顶部导航栏信息
const navBarMenuList = [
  {
    name: 'Home',
    title: '应用分析'
  },

  {
    name: 'AppManage',
    title: '应用管理'
  }
]

// 侧边栏跳转路由的基本路由
const basePath = ref<string | undefined>()

/**
 * @description: 创建侧边栏menu
 * @return {*}
 */
const createdMenuList = () => {
  let routes = router.options.routes // 获取路由信息
  let activeMenu = routes.find((item) => {
    return item.name === navBarSelect.value // 根据顶部导航栏的选中情况来选择选中哪个具体的路由信息，可以打印自己看一下
  })
  basePath.value = activeMenu?.path // 找到需要激活的菜单的路由，后续用来拼接需要跳转的路由
  menuList.splice(0, menuList.length, ...(activeMenu?.children as Array<any>)) // 清空原来的路由信息，并且加入新选中的
}
    
// 默认选中,他根据路由文件中的meta的activeMenu来判断当前选中的那个菜单
const defaultActive = computed(() => {
  return route.meta.activeMenu
})

</script>
   <!-- 顶部导航栏 -->
        <div class="navBarMenu">
          <el-menu
            :default-active="navBarSelect"
            class="el-menu-demo"
            mode="horizontal"
            @select="changeNavBar"
          >
            <el-menu-item
              v-for="item in navBarMenuList"
              class="navBarMenuItem"
              :index="item.name"
              >{{ item.title }}</el-menu-item
            >
          </el-menu>
        </div>
      <!-- 侧边栏 -->
<el-menu
          :default-active="defaultActive"
          class="sideBar"
          :collapse="isCollapse"
          ref="siderBar"
        >
          <template v-for="(item, index) in menuList">
            <el-sub-menu :index="`${index}`" v-if="item.children && item.showChild">
              <template #title>
                <el-icon><component :is="item.icon"></component></el-icon>
                <span>{{ item.cnName }}</span>
              </template>
              <router-link
                style="text-decoration: none"
                v-for="val in item.children"
                :to="{ path: basePath + '/' + item.path + '/' + val.path }"
                :key="index"
              >
                <el-menu-item :index="val.path">{{ val.cnName }}</el-menu-item>
              </router-link>
            </el-sub-menu>

            <router-link
              style="text-decoration: none"
              v-else
              :to="{ path: basePath + '/' + item.path }"
              :key="index"
            >
              <el-menu-item :index="item.path">
                <template #title>
                  <el-icon><component :is="item.icon" /></el-icon>
                  <span class="menuTitle">{{ item.cnName }}</span>
                </template>
              </el-menu-item>
            </router-link>
          </template>
          <div class="sideBarFold" @click="changeCollapse">
            <el-icon :size="25"><Fold /></el-icon>
          </div>
        </el-menu>

如果还有不清楚地地方可以打印一下routes，看一下就明白了。本人也是小菜鸡一枚，欢迎讨论。