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

<template>
    <app-tabs class="app-tabs--primary" :data-list="threeMenus" v-model:data-index="dataIndex" @change="onTabChange">
        <template #navbar>
            <slot></slot>
        </template>
        <!-- 三级路由 -->
        <router-view v-slot="{ Component, route }">
            <component :is="Component" :key="route.fullPath" />
        </router-view>
    </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 threeMenus = shallowRef<AuthMenu[]>([]) // 三级菜单
const dataIndex = shallowRef(0) // 选中的标签

if (parentRoute) {
    const menus = getChildrenMenus(parentRoute.name?.toString())
    const index = menus.findIndex((e) => e.name === route.name)
    threeMenus.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>