快捷導(dǎo)航

Vue頁(yè)面布局與路由映射實(shí)戰(zhàn)教程之RouterView嵌套及動(dòng)態(tài)組件生成詳解

更新時(shí)間：2026年01月14日 10:38:12 作者：念念不忘必有回響

文章介紹了布局組件在Vue應(yīng)用中的設(shè)計(jì)和使用,包括布局組件的核心作用、多層RouterView的嵌套布局、靜態(tài)組件與動(dòng)態(tài)組件的區(qū)別,以及動(dòng)態(tài)路由的優(yōu)勢(shì),通過(guò)這些機(jī)制,可以實(shí)現(xiàn)界面的一致性、靈活的權(quán)限控制和菜單擴(kuò)展,感興趣的朋友跟隨小編一起看看吧

一、布局組件的結(jié)構(gòu)設(shè)計(jì)

1. 布局組件的核心作用

布局組件（如 AppProvider.vue
）是應(yīng)用的頂層容器，負(fù)責(zé)：
1.1 統(tǒng)一頭部、側(cè)邊欄、頁(yè)腳等固定結(jié)構(gòu)；
1.2 通過(guò) 渲染動(dòng)態(tài)內(nèi)容；
1.3 保持界面風(fēng)格一致性。
1.4 共享國(guó)際化文件、統(tǒng)一處理elment組件樣式等
1.5 和路由配置關(guān)聯(lián)，可以定制多種布局方式

引用

 export default defineComponent({
    name: 'AppProvider',
    inheritAttrs: false,
    props: {
      prefixCls: { type: String, default: prefixCls },
    },
    setup(_props) {
      // 動(dòng)態(tài)改變頁(yè)面title
      useTitle();
      // 監(jiān)聽(tīng)屏幕變化
      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: '首頁(yè)', 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: '個(gè)人信息', icon: 'el-icon-user', hidden: true },
        component: () => import('@/views/sys/user_center/index.vue'),
      },
    ],
  },
] as AppRouteModule[];

二、多層 RouterView 的嵌套布局

通過(guò)嵌套路由，布局組件可支持多層級(jí)內(nèi)容渲染：

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

該文件的routerview是要?jiǎng)討B(tài)渲染的內(nèi)容區(qū)域，和子路由配置關(guān)聯(lián)

三、靜態(tài)組件 vs 動(dòng)態(tài)組件

1. 靜態(tài)組件（預(yù)定義路由）

定義：在路由配置文件中顯式聲明路徑和組件的組件。
場(chǎng)景：固定功能頁(yè)面（如登錄頁(yè)、404頁(yè)）。

// router/routes.ts
const routes = [
  {
    path: "/about",
    component: () => import("@/views/About.vue"), // 靜態(tài)組件
  },
];

2. 動(dòng)態(tài)組件（運(yùn)行時(shí)生成）

定義：通過(guò)接口數(shù)據(jù)或業(yè)務(wù)邏輯動(dòng)態(tài)生成路徑和組件的組件。
場(chǎng)景：權(quán)限控制、菜單配置、微前端集成等。

引入組件

// 動(dòng)態(tài)引入組件
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;
}

dynamicImport

/**
 * 根據(jù)組件名導(dǎo)入對(duì)應(yīng)的視圖
 *
 * @param dynamicViewsModules 一個(gè)記錄，鍵是模塊路徑，值是返回Promise的函數(shù)，該P(yáng)romise解析為一個(gè)記錄。
 * @param component 需要?jiǎng)討B(tài)導(dǎo)入的組件路徑，可以是相對(duì)路徑，且預(yù)期以'.vue'或'.tsx'結(jié)尾。
 * @returns 如果找到唯一的匹配項(xiàng)，則返回對(duì)應(yīng)模塊的加載函數(shù)。如果找到多個(gè)匹配項(xiàng)或無(wú)匹配項(xiàng)，將分別發(fā)出警告并返回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(
      '請(qǐng)不要在`src/views/`同級(jí)目錄創(chuàng)建后綴為`.vue`或`.tsx`的同名文件, 這將會(huì)導(dǎo)致動(dòng)態(tài)引入失敗',
    );
    return;
  } else {
    $log.warn('在`src/views/`下找不到`' + component + '`, 請(qǐng)先在前端工程中創(chuàng)建該文件!');
    return EXCEPTION;
  }
}

核心要點(diǎn)：

對(duì)接口返回的動(dòng)態(tài)路由最外層設(shè)置component屬性值，設(shè)置布局組件
規(guī)范組件路由書寫文件夾，比如統(tǒng)一在@/views下書寫，配置路由的時(shí)候根據(jù)該目錄去配置，動(dòng)態(tài)加載子路由的component

四、總結(jié)

布局組件：通過(guò) 渲染動(dòng)態(tài)內(nèi)容，保持界面一致性。
靜態(tài)組件：路徑固定，預(yù)定義在路由配置中。
動(dòng)態(tài)組件：通過(guò)接口或邏輯動(dòng)態(tài)生成，無(wú)需預(yù)先寫死路徑。
動(dòng)態(tài)路由優(yōu)勢(shì)：支持權(quán)限控制、菜單擴(kuò)展，提升代碼靈活性與可維護(hù)性。

到此這篇關(guān)于Vue頁(yè)面布局與路由映射實(shí)戰(zhàn)教程之RouterView嵌套及動(dòng)態(tài)組件生成詳解的文章就介紹到這了,更多相關(guān)vue頁(yè)面布局與路由映射內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: