vue路由实现模式

Vue 路由实现模式

Vue Router 是 Vue.js 官方的路由管理器，支持两种主要的路由实现模式：Hash 模式和History 模式。两者的核心区别在于 URL 的表现形式及与服务器交互的方式。

Hash 模式

Hash 模式利用 URL 中的哈希部分（#）实现路由切换，无需服务器配置，兼容性较好。

• 特点：

  • URL 格式为 http://example.com/#/path。
  • 哈希变化不会触发页面刷新，完全由前端控制。
  • 无需服务器支持，适合静态部署。

• 配置方式：

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

History 模式

History 模式基于 HTML5 History API（pushState、replaceState），URL 更简洁，但需要服务器支持。

• 特点：

  • URL 格式为 http://example.com/path，无 #。
  • 需要服务器配置，避免直接访问子路由时返回 404。
  • 需后端配合重定向所有路径到 index.html。

• 配置方式：

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

• 服务器配置示例（以 Nginx 为例）：

  

  location / {
    try_files $uri $uri/ /index.html;
  }

选择建议

• Hash 模式：适合简单应用、静态站点或无需 SEO 的场景。
• History 模式：适合需要美观 URL 且能控制服务器配置的场景，如企业级应用。

注意事项

• History 模式在刷新或直接访问子路由时，需确保服务器返回 index.html。
• 静态文件部署时（如 GitHub Pages），Hash 模式更易实现。