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

<template>
    <app-tabs class="app-main" :data-list="secondMenus" v-model:data-index="dataIndex" @change="onTabChange">
        <div id="appMainTeleport" class="app-main__teleport"></div>
        <el-scrollbar class="app-main__scrollbar" view-class="app-main__container" always>
            <!-- 二级路由 -->
            <router-view v-slot="{ Component, route }">
                <component :is="Component" :key="route.fullPath" />
            </router-view>
        </el-scrollbar>
    </app-tabs>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { useAuth } from '@/hooks/auth'
import { AuthMenu } from '@/hooks/auth/interface'
import AppTabs from '@/components/base/tabs/index.vue'

const { route, router, getChildrenMenus } = useAuth()
const parentRoute = route.matched[route.matched.length - 2] // 父级路由信息
const secondMenus = shallowRef<AuthMenu[]>([]) // 二级菜单
const dataIndex = shallowRef(0) // 选中的标签

if (parentRoute) {
    const menus = getChildrenMenus(parentRoute.name?.toString())
    const index = menus.findIndex((e) => e.name === route.name)
    secondMenus.value = menus
    if (index > -1) {
        dataIndex.value = index
    }
}

// 切换标签
const onTabChange = (index: number, { name }: AuthMenu) => {
    router.push({ name })
}
</script>

<style lang="less">
@import './index.less';
</style>