如何在 Vue 应用中实现深层路由的懒加载？-Vue.js-PHP中文网

深层路由懒加载需父子组件均用动态import()，支持动态参数和通配符路由；可通过webpackchunkname聚合关联模块；对高频路径可用router.aftereach预加载。

如何在 vue 应用中实现深层路由的懒加载？

深层路由的懒加载，核心是让嵌套路由组件也按需加载，而不是随父级一起打包。它不是只对一级路由生效，而是要覆盖到子路由、孙子路由甚至动态参数路由层级。

在 children 配置中，每个子路由组件都应使用动态 import()，不能复用父组件的导入方式。父路由组件本身也必须是懒加载的，否则子组件仍可能被提前打包。

错误写法（子组件未懒加载）：
component: () => import('./Parent.vue')，其中 Parent.vue 内部静态引入了 Child.vue
正确写法（父子均懒加载）：
父路由：component: () => import('./Parent.vue')
子路由：{ path: 'settings', component: () => import('./Settings.vue') }

动态路径如 /user/:id/profile 或通配符路由 /post/:slug* 同样支持懒加载。关键在于确保 import() 函数体内部不依赖运行时参数——它只负责返回 Promise，加载时机由 Vue Router 控制。

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

可直接写：component: () => import('./UserProfile.vue')
不需要手动解析 $route.params，组件内部照常使用即可
若需根据参数差异化加载（如 PC/移动端不同组件），可在函数内加逻辑：
component: () => { return isMobile ? import('./MobileProfile.vue') : import('./DesktopProfile.vue'); }

深层路由常存在语义关联（如用户中心下的所有子页），用相同 webpackChunkName 把它们打到一个 chunk，减少请求数量，提升二次访问速度。

示例：
const UserHome = () => import(/* webpackChunkName: "user-module" */ './UserHome.vue')
const UserSettings = () => import(/* webpackChunkName: "user-module" */ './UserSettings.vue')
const UserBilling = () => import(/* webpackChunkName: "user-module" */ './UserBilling.vue')
Webpack 自动合并这三个组件为 user-module.[hash].js，首次访问任一子路由即加载整个模块

对用户高概率进入的深层路径（如登录后跳转的 /dashboard/analytics），可在导航守卫中主动触发预加载，避免点击后等待。

在 router.afterEach 中判断目标路径：
router.afterEach(to => { if (to.path.startsWith('/dashboard/')) { import('@/views/dashboard/Analytics.vue'); } });
注意：预加载只是发起请求并缓存，不会渲染，也不影响当前页面

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！