webb2b/src/packages/pc/components/layouts/sidemenu/index.vue

<template>
    <el-menu class="app-sidemenu" :default-active="activeMenu" unique-opened>
        <AppSubmenu :data-list="menus" @click="onMenuClick" />
        <!--系统管理，生产环境需隐藏-->
        <!-- <el-menu-item index="system" @click="routerTo">
            <app-icon class="menu-icon" icon="Setting" />
            <span>系统管理</span>
        </el-menu-item> -->
    </el-menu>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useMenu } from '@/hooks/menu'
import AppIcon from '@pc/components/base/icon/index.vue'
import AppSubmenu from './submenu.vue'

const emit = defineEmits(['click'])
const { route, router, getMenus } = useMenu()
const level = 1 // 菜单层级
const menus = getMenus(level) // 如果是无限级菜单，activeMenu 应该直接返回 route.name

// 高亮菜单
const activeMenu = computed(() => {
    return route.matched[level - 1]?.name ?? route.name
})

// 点击菜单
const onMenuClick = (active: string) => {
    emit('click', active)
}

// 路由跳转
const routerTo = () => {
    router.push({ name: 'system_menu' })
}
</script>