vben 实现点击tabs切换路由显示

代码编写

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>

效果演示