vue中hash和history模式的区别

一 Hash 模式

1 工作原理

• URL 结构：在 Hash 模式下，路由通过 URL 的 hash 部分进行管理。hash 值是以 # 开头的部分，比如
  http://example.com/#/home。
• 浏览器行为：当用户访问一个带有 hash 的 URL 时，浏览器不会向服务器发送请求，而是直接在客户端解析这个 hash
  和路由信息，因此页面不会刷新。

2 优点

• 简单易用：配置简单，无需特别的服务器支持。
• 兼容性好：支持所有现代及旧版浏览器。
• 不影响服务器：由于所有的路由切换都是在客户端完成的，服务器不需要处理额外的路由逻辑。

3 缺点

• SEO 不友好：搜索引擎通常不会索引 hash 后的内容，因此可能影响网站的可见性。
• URL 不美观：URL 中包含 #，对用户体验影响较大。

4 适用场景

• 小型应用、单页应用（SPA）或对 SEO 要求不高的项目。
• 对于快速开发和原型设计非常适合。

二 History 模式

1 工作原理

• URL 结构：在 History 模式下，URL 看起来更加干净，没有 #，例如 http://example.com/home。
• 浏览器行为：使用 HTML5 的 History API，可以实现更改浏览器历史记录的功能。当用户导航到不同的路由时，浏览器会通过
  pushState 或 replaceState 方法更新 URL。

2 优点

• SEO 友好：URL 更加整洁，搜索引擎能够更好地索引页面内容。
• 用户友好：用户看到的 URL 更加简洁，不含 hash，增强了用户体验。
• 灵活性：可以利用浏览器的历史记录功能，实现更复杂的导航效果。

3 缺点

• 需要服务器配置：对于任何非根路径的 URL，服务器必须配置为返回相应的页面，这通常需要设置重定向。
• 浏览器兼容性：虽然现代浏览器普遍支持 HTML5 的 History API，但仍有一些老旧的浏览器可能不支持。

4 适用场景

• 中大型的 SPA 项目，或对 SEO 有高要求的应用。
• 需要干净 URL 和良好用户体验的情况。

三 配置示例

3.1 Hash 模式配置：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  mode: 'hash', 
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ]
});

export default router;

3.2 History 模式配置：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  mode: 'history', 
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ]
});


export default router;

四 总结

选择使用 Hash 模式还是 History 模式取决于你的项目需求。如果你需要一款简单、快速的解决方案且对 SEO 要求不高，Hash 模式就足够了；如果你追求更好的用户体验和 SEO 效果，History 模式则是更优的选择。在实际开发中，根据项目的规模和性质做出合理的选择是非常重要的。