一 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', // 使用 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', // 使用 History 模式
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
});
// 需要在服务器上配置以处理
export default router;
四 总结
选择使用 Hash 模式还是 History 模式取决于你的项目需求。如果你需要一款简单、快速的解决方案且对 SEO 要求不高，Hash 模式就足够了；如果你追求更好的用户体验和 SEO 效果，History 模式则是更优的选择。在实际开发中，根据项目的规模和性质做出合理的选择是非常重要的。
