Vue页面布局与路由映射实战教程之RouterView嵌套及动态组件生成详解

 export default defineComponent({
    name: 'AppProvider',
    inheritAttrs: false,
    props: {
      prefixCls: { type: String, default: prefixCls },
    },
    setup(_props) {
      // 动态改变页面title
      useTitle();
      // 监听屏幕变化
      createBreakpointListen();
      // 添加水印 - 嵌套模式下 不显示水印
      if (!isFrameMode()) useUserWatermark();
      // ElementPlus配置
      const { getElLocale } = useLocale();
      const elConf = computed(() => ({
        locale: getElLocale.value,
        message: { max: 2 },
        zIndex: 3000,
      }));
      return () => (
        <ElConfigProvider {...unref(elConf)}>
          <RouterView />
        </ElConfigProvider>
      );
    },
  });

import { LAYOUT } from '@/router/constant';
export default [
  {
    path: '/',
    component: LAYOUT,
    meta: { orderNo: 0, child1Hoist: true },
    redirect: PageEnum.BASE_HOME,
    children: [
      {
        path: PageEnum.BASE_HOME,
        name: 'Dashboard',
        meta: { title: '首页', icon: 'bi:house-door-fill', affix: true },
        component: () => import('@/views/dashboard/index.vue'),
      },
    ],
  },
  {
    path: '/',
    component: LAYOUT,
    meta: { hidden: true },
    redirect: '/user-center',
children: [
      {
        name: 'UserCenter',
        path: '/user-center',
        meta: { title: '个人信息', icon: 'el-icon-user', hidden: true },
        component: () => import('@/views/sys/user_center/index.vue'),
      },
    ],
  },
] as AppRouteModule[];

<!-- Dashboard.vue (子路由组件) -->
<template>
  <div class="dashboard">
    <Sidebar />
    <div class="content">
      <!-- 渲染嵌套路由内容 -->
      <RouterView />
    </div>
  </div>
</template>

// router/routes.ts
const routes = [
  {
    path: "/about",
    component: () => import("@/views/About.vue"), // 静态组件
  },
];

// 动态引入组件
routes = asyncImportRoute(routeList);

export function asyncImportRoute(routes: AppRouteRecordRaw[], level = 1) {
  if (routes) {
    dynamicViewsModules = dynamicViewsModules || import.meta.glob('../../views/**/*.{vue,tsx}');
    routes.forEach((item) => {
      if (!item.component && item.meta?.frameSrc) item.component = 'IFRAME';
      const { component, children, name } = item;
      if (component) {
        const layoutFound = LayoutMap.get((component as string).toUpperCase());
       item.component = layoutFound || dynamicImport(dynamicViewsModules, component as string);
      } else {
        item.component = level === 1 ? LAYOUT : getParentLayout(name);
      }
      if (children && children.length) asyncImportRoute(children, level + 1);
    });
  }
  return routes;
}

/**
 * 根据组件名导入对应的视图
 *
 * @param dynamicViewsModules 一个记录，键是模块路径，值是返回Promise的函数，该Promise解析为一个记录。
 * @param component 需要动态导入的组件路径，可以是相对路径，且预期以'.vue'或'.tsx'结尾。
 * @returns 如果找到唯一的匹配项，则返回对应模块的加载函数。如果找到多个匹配项或无匹配项，将分别发出警告并返回undefined或EXCEPTION。
 */
function dynamicImport(
  dynamicViewsModules: Record<string, () => Promise<Recordable>>,
  component: string,
) {
 const keys = Object.keys(dynamicViewsModules);
  const matchKeys = keys.filter((key) => {
    const k = key.replace('../../views', '');
    const startFlag = component.startsWith('/');
    const endFlag = component.endsWith('.vue') || component.endsWith('.tsx');
    const startIndex = startFlag ? 0 : 1;
    const lastIndex = endFlag ? k.length : k.lastIndexOf('.');
    return k.substring(startIndex, lastIndex) === component;
  });
  if (matchKeys?.length === 1) {
    const matchKey = matchKeys[0];
    return dynamicViewsModules[matchKey];
  } else if (matchKeys?.length > 1) {
    $log.warn(
      '请不要在`src/views/`同级目录创建后缀为`.vue`或`.tsx`的同名文件, 这将会导致动态引入失败',
    );
    return;
  } else {
    $log.warn('在`src/views/`下找不到`' + component + '`, 请先在前端工程中创建该文件!');
    return EXCEPTION;
  }
}