Vue3实现动态切换Menu的示例代码
作者：Bjnsfxs
本文介绍了在Vue3项目中使用顶部导航栏和侧边栏,通过顶部导航控制侧边栏的生成,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
项目中需要使用一个顶部导航栏和侧边栏，顶部导航栏来控制侧边栏的生成，于是需要动态切换
我是直接根据路由文件来控制整个菜单的生成结构，首先定义一下顶部导航栏的信息，他的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，看一下就明白了。
到此这篇关于Vue3实现动态切换Menu的示例代码的文章就介绍到这了,更多相关Vue3 动态切换Menu内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！