代码编写
1、路由配置页
import type { AppRouteModule } from '/@/router/types';
import { LAYOUT } from '/@/router/constant';
const dashboard: AppRouteModule = {
path: '/dashboard',
name: 'Dashboard',
component: LAYOUT,
redirect: '/dashboard/analysis',
meta: {
icon: 'ion:grid-outline',
title: '测试',
hideChildrenInMenu: true, // 隐藏所有子菜单
},
children: [
{
path: 'analysis',
name: 'Analysis',
component: () => import('/@/views/testPage/index.vue'),
meta: {
affix: true,
title: '测试test',
tabOptions: {
key: 'TEST_LIST',
},
currentActiveMenu: '/dashboard', //当前激活的菜单。用于配置详情页时左侧激活的菜单路径
},
},
{
path: 'test1',
name: 'test1',
component: () => import('/@/views/testPage/Test1.vue'),
meta: {
affix: true,
title: '测试1',
tabOptions: {
key: 'TEST_LIST1',
},
currentActiveMenu: '/dashboard',
},
},
{
path: 'test2',
name: 'test2',
component: () => import('/@/views/testPage/Test2.vue'),
meta: {
affix: true,
title: '测试2',
tabOptions: {
key: 'TEST_LIST2',
},
currentActiveMenu: '/dashboard',
},
},
],
};
export default dashboard;
2、封装一个tabs组件
运用到插槽slot
文件名:pageWapper.vue
<template>
<div class="w-full bg-white m-16px p-16px">
<Tabs v-model:activeKey="activeKey" @tabClick="handleCick" v-if="tabRes.length">
<TabPane v-for="item in tabRes" :key="item.value" :tab="item.label" />
</Tabs>
<slot></slot>
</div>
</template>
<script setup lang="ts">
import { Tabs, TabPane } from 'ant-design-vue';
import { ref, unref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const tabRes = ref<any[]>([]);
const TabsName = {
TEST_LIST: '测试',
TEST_LIST1: '测试1',
TEST_LIST2: '测试2',
};
// routeMathced得到的是当前所在路由children的path;
const routeMathced = router.currentRoute.value.matched[0]?.children || [];
/**当前路由meat需要 tabOptions不能为空 */
const currentMetaKey = (route.meta as any).tabOptions?.key || '';
/**设置路由的默认值 */
const key = (route.meta as any).tabOptions?.key;
const activeKey = ref(key);
// 根据路由生成tab
tabRes.value = routeMathced
.filter((item) => {
return item.meta?.currentActiveMenu === unref(router.currentRoute).meta?.currentActiveMenu;
})
.map((item) => {
const key = (item.meta as any).tabOptions?.key || '';
return {
label: TabsName[key],
value: key,
};
})
.filter((item) => item.label && item.value && currentMetaKey);
console.log(tabRes.value, 'tabRes.value');
/**
* 切换页面,切换路由
*/
const handleCick = (tabKey) => {
/**根据tabOptions.key匹配matched路由 匹配到的既是当前需要跳转的路由 */
console.log(tabKey, 'tabKey');
const findMathced = routeMathced.find((item) => {
const key = (item.meta as any).tabOptions?.key || '';
return key === tabKey;
});
const { name: pathName = '' } = findMathced;
if (!pathName) return;
router.push({ name: pathName });
};
</script>
3、三个页面(随便写写)
文件名:Test1.vue
<template>
<pageWapper>111</pageWapper>
</template>
<script setup lang="ts">
import pageWapper from './pageWapper.vue';
</script>
文件名:Test2.vue
<template>
<pageWapper>222</pageWapper>
</template>
<script setup lang="ts">
import pageWapper from './pageWapper.vue';
</script>
<template>
<pageWapper> qqq </pageWapper>
</template>
<script setup lang="ts">
import pageWapper from './pageWapper.vue';
</script>