Vue頁面布局與路由映射實戰(zhàn)教程之RouterView嵌套及動態(tài)組件生成詳解
更新時間：2026年01月14日 10:38:12 作者：念念不忘 必有回響
文章介紹了布局組件在Vue應(yīng)用中的設(shè)計和使用,包括布局組件的核心作用、多層RouterView的嵌套布局、靜態(tài)組件與動態(tài)組件的區(qū)別,以及動態(tài)路由的優(yōu)勢,通過這些機制,可以實現(xiàn)界面的一致性、靈活的權(quán)限控制和菜單擴展,感興趣的朋友跟隨小編一起看看吧
一、布局組件的結(jié)構(gòu)設(shè)計
1. 布局組件的核心作用
布局組件（如 AppProvider.vue
）是應(yīng)用的頂層容器，負責：
1.1 統(tǒng)一頭部、側(cè)邊欄、頁腳等固定結(jié)構(gòu)；
1.2 通過 渲染動態(tài)內(nèi)容；
1.3 保持界面風(fēng)格一致性。
1.4 共享國際化文件、統(tǒng)一處理elment組件樣式等
1.5 和路由配置關(guān)聯(lián)，可以定制多種布局方式
引用
export default defineComponent({
name: 'AppProvider',
inheritAttrs: false,
props: {
prefixCls: { type: String, default: prefixCls },
},
setup(_props) {
// 動態(tài)改變頁面title
useTitle();
// 監(jiān)聽屏幕變化
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[];二、多層 RouterView 的嵌套布局
通過嵌套路由，布局組件可支持多層級內(nèi)容渲染：
<!-- Dashboard.vue (子路由組件) -->
<template>
<div class="dashboard">
<Sidebar />
<div class="content">
<!-- 渲染嵌套路由內(nèi)容 -->
<RouterView />
</div>
</div>
</template>該文件的routerview是要動態(tài)渲染的內(nèi)容區(qū)域，和子路由配置關(guān)聯(lián)
三、靜態(tài)組件 vs 動態(tài)組件
1. 靜態(tài)組件（預(yù)定義路由）
定義：在路由配置文件中顯式聲明路徑和組件的組件。
場景：固定功能頁面（如登錄頁、404頁）。
// router/routes.ts
const routes = [
{
path: "/about",
component: () => import("@/views/About.vue"), // 靜態(tài)組件
},
];
2. 動態(tài)組件（運行時生成）
定義：通過接口數(shù)據(jù)或業(yè)務(wù)邏輯動態(tài)生成路徑和組件的組件。
場景：權(quán)限控制、菜單配置、微前端集成等。
引入組件
// 動態(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)入對應(yīng)的視圖
*
* @param dynamicViewsModules 一個記錄，鍵是模塊路徑，值是返回Promise的函數(shù)，該Promise解析為一個記錄。
* @param component 需要動態(tài)導(dǎo)入的組件路徑，可以是相對路徑，且預(yù)期以'.vue'或'.tsx'結(jié)尾。
* @returns 如果找到唯一的匹配項，則返回對應(yīng)模塊的加載函數(shù)。如果找到多個匹配項或無匹配項，將分別發(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(
'請不要在`src/views/`同級目錄創(chuàng)建后綴為`.vue`或`.tsx`的同名文件, 這將會導(dǎo)致動態(tài)引入失敗',
);
return;
} else {
$log.warn('在`src/views/`下找不到`' + component + '`, 請先在前端工程中創(chuàng)建該文件!');
return EXCEPTION;
}
}核心要點：
- 對接口返回的動態(tài)路由最外層設(shè)置component屬性值，設(shè)置布局組件
- 規(guī)范組件路由書寫文件夾，比如統(tǒng)一在@/views下書寫，配置路由的時候根據(jù)該目錄去配置，動態(tài)加載子路由的component
四、 總結(jié)
- 布局組件：通過 渲染動態(tài)內(nèi)容，保持界面一致性。
- 靜態(tài)組件：路徑固定，預(yù)定義在路由配置中。
- 動態(tài)組件：通過接口或邏輯動態(tài)生成，無需預(yù)先寫死路徑。
- 動態(tài)路由優(yōu)勢：支持權(quán)限控制、菜單擴展，提升代碼靈活性與可維護性。
到此這篇關(guān)于Vue頁面布局與路由映射實戰(zhàn)教程之RouterView嵌套及動態(tài)組件生成詳解的文章就介紹到這了,更多相關(guān)vue頁面布局與路由映射內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
從Vue 3的Composition API開始,ref成為了處理響應(yīng)式數(shù)據(jù)的核心方式之一,本文給大家介紹Vue模板中ref的自動解包機制及常見誤區(qū),感興趣的朋友跟隨小編一起看看吧2026-03-03
這篇文章主要介紹了vue.js自定義組件directives的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
Vue全局事件總線$bus安裝與應(yīng)用小結(jié)
這篇文章主要介紹了Vue全局事件總線$bus安裝與應(yīng)用,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue3.0-props、computed、自定義事件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
關(guān)于vuepress部署出現(xiàn)樣式的問題及解決
這篇文章主要介紹了關(guān)于vuepress部署出現(xiàn)樣式的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue.js內(nèi)置組件之keep-alive組件使用
keep-alive是Vue.js的一個內(nèi)置組件。這篇文章主要介紹了vue.js內(nèi)置組件之keep-alive組件使用,需要的朋友可以參考下2018-07-07
一文詳解vue-router中的導(dǎo)航守衛(wèi)
vue-router提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航，在 vue-router 中，導(dǎo)航守衛(wèi)是一種非常重要的功能，所以本文將詳細講解一下vue-router中的導(dǎo)航守衛(wèi)，感興趣的同學(xué)跟著小編一起來看看吧2023-07-07
vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明(多種情況分析)
這篇文章主要介紹了vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明,報錯原因是typescript?只能理解?.ts?文件，無法理解?.vue文件，本文通過多種情況分析給大家詳細講解，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue3異步組件Suspense的使用方法詳解,需要的朋友可以參考下2023-01-01
組件（Component）是 Vue.js 最強大的功能之一。本文重點給大家介紹vuejs組件相關(guān)知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09