vue路由hash实现原理

Vue路由Hash模式实现原理

Vue Router的Hash模式利用URL中的hash（#）部分实现前端路由，无需向服务器发送请求。其核心原理基于浏览器提供的hashchange事件和window.locationAPI。

核心机制

URL的hash变化不会触发页面刷新，但会记录在浏览历史中。例如：http://example.com/#/home。当hash部分变化时，浏览器会触发hashchange事件，Vue Router通过监听此事件实现路由切换。

关键实现步骤

监听hash变化 通过window.addEventListener('hashchange', callback)监听URL的hash变化，触发对应的路由组件渲染。

修改hash路径 使用window.location.hash或history.pushState（兼容性处理）主动修改hash值，更新浏览器地址栏显示。

路由映射匹配 维护一个路由映射表（routes配置），根据当前hash路径（如#/user）匹配对应的组件，通过Vue的响应式系统动态渲染。

代码示例

// 简易实现示例
class HashRouter {
  constructor(routes) {
    this.routes = routes;
    this.currentUrl = '';
    window.addEventListener('load', this.refresh.bind(this));
    window.addEventListener('hashchange', this.refresh.bind(this));
  }

  refresh() {
    this.currentUrl = window.location.hash.slice(1) || '/';
    const route = this.routes.find(route => route.path === this.currentUrl);
    if (route) {
      // 渲染对应组件
      document.getElementById('app').innerHTML = route.component;
    }
  }
}

特点与限制

• 优点：兼容性好（支持IE8+），无需服务器配置。
• 缺点：URL带有#不美观，SEO不友好（需额外处理）。

与History模式对比

Hash模式无需服务器支持，适合静态部署；History模式依赖服务器配置（如Nginx的try_files），但URL更简洁。选择需根据项目需求权衡。