手写 Vue-Router：从原理到实现的深度解析

一、为什么需要手写 Vue-Router？

在 Vue.js 生态中，vue-router 作为官方路由库提供了完善的路由功能，但开发者往往停留在使用层面。手写一个简化版 Vue-Router 不仅能加深对前端路由原理的理解，还能提升解决复杂路由场景的能力。例如，当需要定制特殊路由逻辑或优化性能时，理解底层机制至关重要。

核心价值点：

1. 理解路由注册机制：如何将路由配置转化为可执行的导航逻辑
2. 掌握路由匹配原理：路径参数、动态路由、通配符路由的实现方式
3. 学习导航守卫设计：全局/路由独享/组件内守卫的协作机制
4. 对比哈希与历史模式：两种 URL 模式的适用场景与实现差异

二、核心实现步骤

1. 基础架构设计

首先需要创建一个 Router 类，接收路由配置并初始化核心功能：

class VueRouter {
  constructor(options) {
    this.routes = options.routes || []
    this.routeMap = this.createRouteMap()
    this.currentPath = '/'
  }
  createRouteMap() {
    const routeMap = {}
    this.routes.forEach(route => {
      routeMap[route.path] = route.component
    })
    return routeMap
  }
}

2. 路由注册机制

通过 Vue.use() 安装插件时，需要实现 install 方法并注入路由实例：

VueRouter.install = function(Vue) {
  Vue.mixin({
    beforeCreate() {
      if (this.$options.router) {
        Vue.prototype.$router = this.$options.router
      }
    }
  })
}

3. 路由匹配算法

实现路径到组件的映射，支持动态参数：

matchRoute(path) {
  for (const routePath in this.routeMap) {
    // 简单动态路由匹配示例
    if (routePath === path || 
        (routePath.includes(':') && 
         path.startsWith(routePath.split(':')[0]))) {
      return this.routeMap[routePath]
    }
  }
  return this.routeMap['*'] || null // 通配符路由
}

4. 哈希模式实现

监听 hashchange 事件实现路由切换：

initHashMode() {
  window.addEventListener('hashchange', () => {
    this.currentPath = window.location.hash.slice(1) || '/'
    this.updateView()
  })
  if (window.location.hash === '') {
    window.location.hash = '#/'
  }
}
updateView() {
  const component = this.matchRoute(this.currentPath)
  // 这里应通过 Vue 的响应式系统更新视图
  console.log('渲染组件:', component)
}

5. 历史模式实现

使用 History API 实现更美观的 URL：

initHistoryMode() {
  window.addEventListener('popstate', () => {
    this.currentPath = window.location.pathname
    this.updateView()
  })
}
push(path) {
  history.pushState({}, '', path)
  this.currentPath = path
  this.updateView()
}

三、高级功能实现

1. 导航守卫设计

实现全局前置守卫：

constructor(options) {
  // ...原有代码
  this.beforeHooks = []
}
beforeEach(fn) {
  this.beforeHooks.push(fn)
}
async resolveHooks(to, from, next) {
  for (const hook of this.beforeHooks) {
    await hook(to, from, next)
  }
  next()
}

2. 动态路由添加

支持运行时添加路由：

addRoutes(routes) {
  routes.forEach(route => {
    this.routeMap[route.path] = route.component
  })
}

3. 嵌套路由实现

通过组件组合实现嵌套结构：

// 路由配置示例
{
  path: '/user',
  component: UserLayout,
  children: [
    { path: 'profile', component: Profile }
  ]
}

四、与 Vue 的深度集成

1. router-view 实现

创建指令式视图渲染组件：

const RouterView = {
  render(h) {
    const component = this.$router.matchRoute(this.$router.currentPath)
    return h(component || { render: h => h('div', '404') })
  }
}

2. router-link 实现

创建导航链接组件：

Vue.component('router-link', {
  props: {
    to: String
  },
  render(h) {
    return h('a', {
      attrs: { href: `#${this.to}` },
      on: { click: this.handleClick }
    }, this.$slots.default)
  },
  methods: {
    handleClick(e) {
      e.preventDefault()
      this.$router.push(this.to)
    }
  }
})

五、性能优化策略

1. 路由懒加载

实现基于 Promise 的组件异步加载：

function lazyLoad(loader) {
  return () => loader().then(module => module.default)
}
// 使用示例
{
  path: '/dashboard',
  component: lazyLoad(() => import('./views/Dashboard.vue'))
}

2. 路由匹配缓存

使用 LRU 缓存优化频繁访问的路由：

class RouteCache {
  constructor(maxSize) {
    this.cache = new Map()
    this.maxSize = maxSize
  }
  get(key) {
    const val = this.cache.get(key)
    if (val) {
      this.cache.delete(key)
      this.cache.set(key, val)
    }
    return val
  }
  set(key, val) {
    this.cache.delete(key)
    this.cache.set(key, val)
    if (this.cache.size > this.maxSize) {
      this.cache.delete(this.cache.keys().next().value)
    }
  }
}

六、实际应用建议

1. 渐进式实现：先实现核心功能，再逐步添加高级特性
2. 测试驱动开发：编写测试用例验证路由匹配、导航守卫等关键逻辑
3. 性能监控：添加路由切换耗时统计，优化慢路由场景
4. 错误处理：完善 404 路由和导航失败的处理机制

七、完整实现示例

class VueRouter {
  constructor(options) {
    this.mode = options.mode || 'hash'
    this.routes = options.routes || []
    this.routeMap = this.createRouteMap()
    this.currentPath = '/'
    this.initMode()
    this.initHooks()
  }
  createRouteMap() {
    // 实现同上
  }
  initMode() {
    if (this.mode === 'history') {
      this.initHistoryMode()
    } else {
      this.initHashMode()
    }
  }
  push(path) {
    if (this.mode === 'history') {
      history.pushState({}, '', path)
    } else {
      window.location.hash = path
    }
    this.currentPath = path
    this.updateView()
  }
  // 其他方法实现...
}
// Vue 插件安装
VueRouter.install = function(Vue) {
  Vue.mixin({
    beforeCreate() {
      if (this.$options.router) {
        Vue.prototype.$router = this.$options.router
      }
    }
  })
  Vue.component('router-view', RouterView)
  Vue.component('router-link', RouterLink)
}

通过手写实现 Vue-Router，开发者不仅能深入理解路由工作原理，还能获得定制化路由方案的能力。这种实践对于解决复杂路由场景、优化应用性能具有重要价值。建议开发者在实际项目中先使用官方路由库，在掌握原理后再尝试定制化开发。