异步组件 路由懒加载 综合 Demo在 Vue 3 中路由懒加载本身就是基于异步组件实现的() import()返回 Promise。但如果你需要更精细的控制如加载状态、错误处理、超时等可以结合defineAsyncComponent在路由配置中或组件内部使用。下面给出一个完整的 Demo展示两种组合方式1. 路由配置中使用defineAsyncComponent带加载/错误状态// router/index.jsimport{createRouter,createWebHistory}fromvue-routerimport{defineAsyncComponent}fromvue// 定义一个 Loading 组件可以是任何 Vue 组件constLoadingComponent{template:div styletext-align:center; padding: 20px; color: #409eff;⏳ 页面加载中.../div}// 定义一个错误组件constErrorComponent{template:div styletext-align:center; padding: 20px; color: red;❌ 加载失败请稍后重试/div}// 使用 defineAsyncComponent 包装路由组件constHomedefineAsyncComponent({loader:()import(/views/Home.vue),loadingComponent:LoadingComponent,errorComponent:ErrorComponent,delay:200,// 延迟 200ms 显示 loading避免闪烁timeout:3000// 超时时间 3s})constAboutdefineAsyncComponent({loader:()import(/views/About.vue),loadingComponent:LoadingComponent,errorComponent:ErrorComponent,delay:200,timeout:3000})// 普通路由不使用 defineAsyncComponent直接用 import 函数也可但无自定义状态constroutes[{path:/,name:Home,component:Home},{path:/about,name:About,component:About},// 普通懒加载不加额外配置{path:/dashboard,name:Dashboard,component:()import(/views/Dashboard.vue)}]constroutercreateRouter({history:createWebHistory(),routes})exportdefaultrouter2. 在路由懒加载的组件内部再使用异步子组件Dashboard.vue组件被路由懒加载其中又嵌套了一个异步图表组件。!-- views/Dashboard.vue -- template div h2仪表盘/h2 p这是一个被路由懒加载的页面内部又包含一个异步子组件/p !-- 异步子组件 -- AsyncChart / /div /template script setup import { defineAsyncComponent } from vue // 在组件内部定义异步子组件同样可以配置 loading / error const AsyncChart defineAsyncComponent({ loader: () import(/components/Chart.vue), loadingComponent: { template: div styleborder:1px solid #ccc; padding: 20px; 图表加载中.../div }, delay: 300 }) /script3. 异步子组件示例Chart.vue!-- components/Chart.vue -- template div styleborder: 1px solid #42b883; padding: 20px; border-radius: 8px; h3 实时数据图表/h3 p这里是模拟的图表内容数据{{ data }}/p /div /template script setup import { ref, onMounted } from vue const data ref([]) onMounted(() { // 模拟异步数据请求 setTimeout(() { data.value [10, 20, 30, 40, 50] }, 500) }) /script4. 父组件 App.vue路由出口template div idapp nav router-link to/首页/router-link | router-link to/about关于/router-link | router-link to/dashboard仪表盘/router-link /nav router-view / /div /template style nav { margin-bottom: 20px; } router-link { margin: 0 10px; } /style运行效果说明首次进入首页路由组件使用defineAsyncComponent会显示“⏳ 页面加载中…”加载完成后显示首页内容。切换到“关于”同样显示加载状态如果网络慢或配置了延迟。切换到“仪表盘”这个路由是普通() import()形式页面会直接显示无 loading 状态但内部嵌套的AsyncChart会显示“ 图表加载中…”加载完成后显示图表。如果加载超时模拟慢网络会显示错误组件可自行测试。核心知识点总结使用方式优点适用场景路由配置中使用defineAsyncComponent可配置全局统一的 loading/error 状态页面级组件需要优雅的加载反馈组件内部使用defineAsyncComponent粒度更细可针对某一块内容单独控制复杂页面中的局部模块如图表、编辑器等直接用() import()简单无需额外配置对加载状态要求不高追求极致简洁注意点defineAsyncComponent仅在 Vue 3 中可用Vue 2 需要使用Vue.component或插件。路由懒加载的() import()本身返回的就是一个异步组件Vue Router 内部会自动处理所以直接使用也能正常工作。但加上defineAsyncComponent后可以获得更多控制。开发环境中由于 Vite/Webpack 的热更新加载很快可能看不到 loading 效果可以故意增加delay值来观察。如果多个路由共用相同的 loading 组件可以抽取成公共变量如上面示例中的LoadingComponent。