一、路由系统核心概念解析

1.1 路由的本质

路由系统本质是URL 与组件的映射关系，通过解析 URL 变化动态加载对应组件。在单页应用(SPA)中，路由需处理：

• 路径匹配（如 /user/:id）
• 组件渲染（通过 <router-view>）
• 导航控制（前进/后退/重定向）

1.2 传统路由实现方式对比

实现方式	优点	缺点
Hash 模式	兼容性好，无需服务器配置	URL 包含 # 符号
History 模式	URL 简洁	需服务器配置 fallback
Memory 模式	完全客户端控制	无法分享特定 URL

二、基础路由系统实现

2.1 路由注册机制

class MiniRouter {
  constructor() {
    this.routes = {}; // 存储路径-组件映射
    this.currentPath = '/';
  }
  // 注册路由规则
  route(path, component) {
    this.routes[path] = component;
  }
}

关键点：

• 使用对象存储路径与组件的映射关系
• 路径支持静态（/home）和动态（/user/:id）匹配

2.2 路由匹配算法

matchRoute(path) {
  // 精确匹配
  if (this.routes[path]) return this.routes[path];
  // 动态路由匹配（简化版）
  const dynamicMatch = Object.keys(this.routes).find(route => {
    const regex = this.pathToRegex(route);
    return regex.test(path);
  });
  return dynamicMatch ? this.routes[dynamicMatch] : null;
}
pathToRegex(path) {
  return new RegExp(`^${path.replace(/:\w+/g, '([^/]+)')}$`);
}

实现要点：

1. 优先精确匹配
2. 动态参数使用正则表达式捕获（如 :id → ([^/]+)）
3. 返回匹配的组件或 null

2.3 路由导航实现

navigate(path) {
  history.pushState(null, '', path);
  this.currentPath = path;
  this.updateView();
}
updateView() {
  const component = this.matchRoute(this.currentPath);
  if (component) {
    const container = document.getElementById('app');
    container.innerHTML = `<div>${component.render()}</div>`;
  }
}

核心逻辑：

• 使用 history.pushState 修改 URL
• 触发视图更新机制
• 处理 404 场景（返回 null 时）

三、进阶功能实现

3.1 嵌套路由实现

class NestedRouter extends MiniRouter {
  constructor() {
    super();
    this.children = {}; // 嵌套路由配置
  }
  // 注册嵌套路由
  childRoute(parentPath, childRoutes) {
    this.children[parentPath] = childRoutes;
  }
  // 深度优先匹配
  deepMatch(path) {
    let component = this.matchRoute(path);
    if (!component && path.includes('/')) {
      const parentPath = path.split('/').slice(0, -1).join('/');
      const childRoutes = this.children[parentPath];
      if (childRoutes) {
        const childPath = `/${path.split('/').pop()}`;
        // 递归匹配子路由...
      }
    }
    return component;
  }
}

实现难点：

• 构建路由层级树结构
• 递归匹配父-子路由关系
• 处理多级嵌套场景

3.2 导航守卫实现

class GuardRouter extends MiniRouter {
  constructor() {
    super();
    this.guards = []; // 存储导航守卫
  }
  // 添加全局前置守卫
  beforeEach(guard) {
    this.guards.push(guard);
  }
  async navigateWithGuards(path) {
    try {
      for (const guard of this.guards) {
        const result = await guard(path);
        if (result === false) return; // 取消导航
        if (typeof result === 'string') {
          path = result; // 重定向
        }
      }
      this.navigate(path);
    } catch (error) {
      console.error('Navigation failed:', error);
    }
  }
}

守卫类型：

1. 全局前置守卫 (beforeEach)
2. 路由独享守卫 (beforeEnter)
3. 组件内守卫 (beforeRouteEnter)

3.3 路由懒加载实现

// 动态导入组件
function lazyLoad(componentPath) {
  return new Promise((resolve) => {
    import(componentPath).then(module => {
      resolve(module.default);
    });
  });
}
// 修改路由注册方法
async route(path, componentPath) {
  const component = await lazyLoad(componentPath);
  this.routes[path] = component;
}

优化策略：

• 使用 import() 动态加载
• 结合 Webpack 代码分割
• 添加加载状态处理

四、性能优化实践

4.1 路由匹配缓存

class CachedRouter extends MiniRouter {
  constructor() {
    super();
    this.cache = new Map(); // 路由匹配缓存
  }
  matchRoute(path) {
    if (this.cache.has(path)) {
      return this.cache.get(path);
    }
    const component = super.matchRoute(path);
    this.cache.set(path, component);
    return component;
  }
}

缓存策略：

• 使用 LRU 算法限制缓存大小
• 路由变更时清除相关缓存
• 对动态路由参数做特殊处理

4.2 预加载策略

// 监听鼠标悬停预加载
document.addEventListener('mouseover', (e) => {
  if (e.target.tagName === 'A' && e.target.href) {
    const path = new URL(e.target.href).pathname;
    if (this.routes[path]) {
      // 触发预加载但不导航
      lazyLoad(this.getComponentPath(path)).catch(() => {});
    }
  }
});

预加载时机：

1. 鼠标悬停在链接上时
2. 用户滚动接近底部时
3. 网络状态良好时

五、完整实现示例

class AdvancedRouter {
  constructor(options = {}) {
    this.routes = {};
    this.guards = [];
    this.mode = options.mode || 'hash';
    this.init();
  }
  init() {
    window.addEventListener('popstate', () => {
      this.updateView();
    });
  }
  route(path, component) {
    this.routes[path] = component;
  }
  beforeEach(guard) {
    this.guards.push(guard);
  }
  async navigate(path) {
    for (const guard of this.guards) {
      const result = await guard(path);
      if (result === false) return;
      if (typeof result === 'string') path = result;
    }
    if (this.mode === 'history') {
      history.pushState(null, '', path);
    } else {
      location.hash = path;
    }
    this.updateView();
  }
  updateView() {
    const path = this.mode === 'history' 
      ? location.pathname 
      : location.hash.slice(1) || '/';
    const component = this.matchRoute(path);
    if (component) {
      const app = document.getElementById('app');
      app.innerHTML = `<div>${component.render()}</div>`;
    }
  }
  matchRoute(path) {
    // 实现精确匹配和动态匹配...
  }
}
// 使用示例
const router = new AdvancedRouter({ mode: 'history' });
router.route('/', {
  render: () => '<h1>Home Page</h1>'
});
router.route('/about', {
  render: () => '<h1>About Us</h1>'
});
router.beforeEach((to) => {
  console.log(`Navigating to ${to}`);
  // return false; // 取消导航
  // return '/login'; // 重定向
});
// 启动路由
router.navigate('/');

六、实际应用建议

1. 渐进式增强：先实现基础路由功能，再逐步添加守卫、懒加载等特性
2. 错误处理：添加 404 路由和全局错误捕获
3. 类型安全：使用 TypeScript 定义路由配置类型

4. 测试策略：

   • 单元测试路由匹配逻辑
   • 集成测试导航流程
   • 端到端测试完整用户流程

5. 性能监控：

   // 路由性能监控
   const start = performance.now();
   router.navigate('/complex-route').then(() => {
     const duration = performance.now() - start;
     console.log(`Route rendered in ${duration}ms`);
   });

通过手写实现 vue-router 核心功能，开发者不仅能深入理解路由系统工作原理，还能根据项目需求定制特殊路由逻辑。这种知识迁移能力对于解决复杂前端架构问题具有重要价值。