The project needs to use a top navigation bar and a sidebar. The top navigation bar is used to control the generation of the sidebar, so it needs to switch dynamically.
I directly control the generation structure of the entire menu based on the routing file. First, I define the information of the top navigation bar.The key needs to match the top-level name of the route, easy to switch
//
// Top navigation bar informationconst navBarMenuList = [
{
name: 'Home',
title: 'Application Analysis'
},
{
name: 'AppManage',
title: 'Application Management'
}
]
In the routing file, give eachMenu item that needs to be selectedAdd activeMenu and usepathAs a value, here I need event managementNot showing submenu, so an additional showchild is configured
export default [
{
path: '/appManage', // Top-level routing (please give me the abbreviation) redirect: '/appManage/gameBaseInfo',
name: 'AppManage', // This corresponds to the name of navBarMenu children: [
{
path: 'gameBaseInfo', // Secondary routing name: 'GameBaseInfo',
icon: 'Memo',
cnName: 'Basic Information',
component: () => import('@/views/AppManage/'),
meta: {
activeMenu: 'gameBaseInfo', // Used to assign values to the index item of the menu and correspond to the address of this route. needKeepAlive: true
}
},
{
path: 'eventManage',
name: 'EventManage',
icon: 'Management',
cnName: 'Incident Management',
showChild: false, // Is it necessary to display the submenu component: () => import('@/views/AppManage/'),
redirect: '/appManage/eventManage/eventTable',
meta: {
needKeepAlive: true,
activeMenu: 'eventManage'
},
children: [
{
path: 'eventDetail/:eventID?', // Subroutine name: 'EventDetail',
component: () => import('@/views/AppManage/')
},
{
path: 'eventTable',
name: 'EventTable',
component: () => import('@/views/AppManage/')
}
]
}
]
}
]
The menu jump does not use the router mode that comes with el-menu. It uses route-link to achieve jump. The jump route is directly from:Top-level routing + secondary routing + sub-routingform.Default-active must be enabled, as our basis for switching, and thenDetermine whether submenu is generated based on whether there is children in the routing file. Each menu itemIndex corresponds to the activemenu in the routing file,When the route is switched, defaultactive will automatically calculate which menu item should be selected at the moment. The judgment condition is because some menus need not display submenu.
<script lang='ts' setup>
// Selection of the top navigation barconst navBarSelect = ref<string>('Home')
// Routing information, and it is also the basis information generated by the sidebarconst menuList = reactive<Array<any>>([])
// Top navigation bar informationconst navBarMenuList = [
{
name: 'Home',
title: 'Application Analysis'
},
{
name: 'AppManage',
title: 'Application Management'
}
]
// Basic routing for sidebar jump routeconst basePath = ref<string | undefined>()
/**
* @description: Create a sidebar menu
* @return {*}
*/
const createdMenuList = () => {
let routes = // Get routing information let activeMenu = ((item) => {
return === // Choose which specific routing information to select based on the selection of the top navigation bar. You can print it and read it yourself })
= activeMenu?.path // Find the route of the menu that needs to be activated, and then use it to splice the route that needs to be redirected (0, , ...(activeMenu?.children as Array<any>)) // Clear the original routing information and add the newly selected}
// Select by default, it determines the currently selected menu based on the activeMenu of meta in the routing fileconst defaultActive = computed(() => {
return
})
</script>
<!-- Top navigation bar -->
<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=""
>{{ }}</el-menu-item
>
</el-menu>
</div>
<!-- Sidebar -->
<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=" && ">
<template #title>
<el-icon><component :is=""></component></el-icon>
<span>{{ }}</span>
</template>
<router-link
style="text-decoration: none"
v-for="val in "
:to="{ path: basePath + '/' + + '/' + }"
:key="index"
>
<el-menu-item :index="">{{ }}</el-menu-item>
</router-link>
</el-sub-menu>
<router-link
style="text-decoration: none"
v-else
:to="{ path: basePath + '/' + }"
:key="index"
>
<el-menu-item :index="">
<template #title>
<el-icon><component :is="" /></el-icon>
<span class="menuTitle">{{ }}</span>
</template>
</el-menu-item>
</router-link>
</template>
<div class="sideBarFold" @click="changeCollapse">
<el-icon :size="25"><Fold /></el-icon>
</div>
</el-menu>
If there are still unclear places, you can print routes and you will understand after reading them.
This is the article about the example code for Vue3 to implement dynamic switching menu. For more related content for Vue3 to switch menus, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!