Vue路由配置与设计完全指南

一、路由模式详解

Hash模式 vs History模式

Vue Router支持两种主要的路由模式：

const router = new VueRouter({
  mode: 'hash', // 或 'history'
  routes: [...]
})

Hash模式特点：

• URL中带有#符号，如http://example.com/#/home
• 通过监听hashchange事件实现路由切换
• 不需要服务器端配置，适合纯静态部署

History模式特点：

• 干净的URL，如http://example.com/home
• 基于HTML5 History API
• 需要服务器端配置，避免刷新404

实践建议：

• 开发环境可用History模式
• 生产环境如无服务器配置权限则用Hash模式
• 需要SEO考虑时优先History模式

Abstract模式

用于非浏览器环境（如SSR、Electron、NativeScript等）：

const router = new VueRouter({
  mode: 'abstract',
  routes: [...]
})

二、路由表结构设计

静态路由配置

基础路由配置示例：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue')
  }
]

动态路由加载

实现按需加载和权限路由：

// 异步获取路由表
function getDynamicRoutes() {
  return fetch('/api/routes').then(res => res.json())
}

// 动态添加路由
router.addRoutes(getDynamicRoutes())

实践建议：

• 核心路由静态配置
• 按模块拆分路由文件
• 权限路由动态加载

三、路由元信息（meta字段）

高级路由配置示例：

const routes = [
  {
    path: '/dashboard',
    meta: {
      requiresAuth: true,
      title: '控制面板',
      keepAlive: true,
      permissions: ['admin']
    }
  }
]

典型应用场景

1. 权限控制：

   router.beforeEach((to, from, next) => {
     if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
     } else {
    next()
     }
   })

2. 页面标题管理：

   router.afterEach((to) => {
     document.title = to.meta.title || '默认标题'
   })

3. 组件缓存控制：

   <template>
     <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
     </keep-alive>
     <router-view v-if="!$route.meta.keepAlive" />
   </template>

实践建议：

• 统一meta字段命名规范
• 编写辅助函数处理通用meta逻辑
• 避免过度使用meta导致路由表臃肿

四、最佳实践总结

1. 路由分层：

   • 基础路由（登录/404等）
   • 主框架路由（带布局组件）
   • 功能模块路由

2. 性能优化：

   // 使用webpack魔法注释
   component: () => import(/* webpackChunkName: "about" */ './About.vue')

3. 类型安全（TS）：

   declare module 'vue-router' {
     interface RouteMeta {
       requiresAuth?: boolean
       title?: string
     }
   }

4. 配置与逻辑分离：

   /src/router/
   ├── index.ts       # 路由实例
   ├── routes.ts      # 静态路由
   └── dynamic.ts     # 动态路由

通过合理配置路由模式、设计路由表结构并善用元信息，可以构建出既灵活又易于维护的Vue应用导航系统。