Vue 路由懒加载:
原理描述：“通过箭头函数封装了组件的动态导入语法，import(...)本身会返回一个 Promise 对象。当路由匹配到对应路径时，Vue Router 会调用这个箭头函数，触发 Promise 执行，从而加载当前路由对应的组件模块（避免和解决路由一次性加载所有组件代码和相关依赖导致首屏加载时间过长的问题）”
// 非懒加载：初始时就加载 Home 组件 import Home from './views/Home.vue' // 懒加载：只有访问 /home 时才加载 Home 组件 const Home = () => import('./views/Home.vue')接口动态路由加载（Dynamic Routing via API）
- 核心目的：根据后端返回的动态数据（通常是权限或业务配置）动态生成路由配置，实现路由的灵活控制（如权限管理）。
- 原理：前端不预先写死所有路由，而是在特定时机（如用户登录后）通过调用后端接口，获取该用户有权访问的路由列表（包含路径、组件、权限等信息），再动态添加到路由系统中。
- 场景：适用于需要基于用户角色 / 权限动态展示不同路由的场景（例如管理员和普通用户看到的路由菜单不同）。
- 实现方式：在前端路由系统中，通过路由实例的 API（如 Vue Router 的
addRoute，React Router 的动态路由配置）将接口返回的路由信息动态注入，例如：
// 登录后获取后端返回的路由列表 api.getRoutes().then(routes => { // 将动态路由添加到路由系统 routes.forEach(route => router.addRoute(route)) })- 路由懒加载是 **“加载时机的优化”**，解决的是 “什么时候加载代码” 的问题，核心是性能优化。
- 接口动态路由加载是 **“路由配置的动态生成”**，解决的是 “加载哪些路由” 的问题，核心是权限控制或动态配置。
二者可以结合使用：例如动态从接口获取路由列表后，对列表中的组件采用懒加载方式导入，既满足权限需求，又优化加载性能。
结合路由懒加载和接口动态路由加载的核心思路是：从接口获取动态路由配置后，将配置中的组件路径转换为懒加载形式，再动态添加到路由系统中。以下以 Vue + Vue Router 为例，提供具体实现方案（React 思路类似，核心是动态导入组件 + 动态注册路由）。
一、前提准备
- 后端接口设计：登录后返回该用户有权访问的路由列表，包含路由的基本信息（路径、名称、组件路径、子路由等）。示例返回格式：json
// 接口返回的动态路由列表 [ { "path": "/dashboard", "name": "Dashboard", "meta": { "title": "仪表盘", "roles": ["admin", "user"] }, "component": "La
