Vue大型项目路由设计与懒加载

大型Vue项目路由需合理组织并配合懒加载优化性能，下面梳理核心设计策略。

路由表组织

模块化路由配置

// router/routes.js
const routes = [
  {
    path: '/',
    component: () => import('@/layouts/default.vue'),
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index.vue'),
        meta: { title: '工作台', keepAlive: true }
      },
      {
        path: 'user',
        name: 'User',
        component: () => import('@/views/user/index.vue'),
        meta: { title: '用户管理', permission: 'user:list' }
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/index.vue'),
    meta: { title: '登录', public: true }
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/error/404.vue')
  }
]

export default routes

路由表应按功能模块分组，便于后期维护和权限过滤。

组件懒加载

标准懒加载

// 方式1：直接内联
const UserList = () => import('@/views/user/index.vue')

// 方式2：带错误重试
const withRetry = (importFn) => {
  return () => importFn().catch(() => {
    return { template: '<div>加载失败，请刷新</div>' }
  })
}

const OrderList = withRetry(() => import('@/views/order/index.vue'))

批量预加载

// router/prefetch.js
export const prefetchComponents = async (componentFns) => {
  const promises = componentFns.map(fn => {
    if (typeof fn === 'function') return fn()
    return Promise.resolve()
  })
  await Promise.allSettled(promises)
}

// 空闲时预加载下一页
export const idlePrefetch = (componentFn) => {
  if ('requestIdleCallback' in window) {
    requestIdleCallback(() => componentFn())
  } else {
    setTimeout(() => componentFn(), 1000)
  }
}

路由实例配置

完整配置

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition
    if (to.hash) return { el: to.hash, behavior: 'smooth' }
    return { top: 0 }
  }
})

export default router

路由元信息设计

meta字段规范

{
  path: '/order/detail',
  meta: {
    title: '订单详情',        // 页面标题
    keepAlive: true,          // 是否缓存
    permission: 'order:view', // 权限标识
    public: false,            // 是否公开访问
    breadcrumb: ['订单', '详情'] // 面包屑导航
  }
}

懒加载与预加载对比

要点总结

• 路由表按功能模块分组，保持结构清晰
• 使用动态import实现组件懒加载，减少首屏体积
• 配合预加载策略优化高频页面切换体验
• meta字段统一管理标题、权限、缓存等配置
• 路由配置应与守卫逻辑分离，便于独立测试

存放路径: articles/VUE/专家/大型项目架构分层设计/路由设计与懒加载.md