chore(ci): blog sync

Author: coderPerseus

data/blog/post-24.mdx

@@ -0,0 +1,87 @@
+---
+title: 路由的 hash 模式 和 history 模式的区别是什么？
+date: 2024-11-05T03:44:11Z
+slug: post-24
+author: chaseFunny：https://github.com/chaseFunny
+tags: ["AI"]
+---
+
+让我详细解释一下路由的 hash 模式和 history 模式的区别：
+
+1. URL 格式区别：
+- Hash 模式：使用 # 号，例如：`www.example.com/#/home` [2](https://router.vuejs.org/guide/essentials/history-mode)
+- History 模式：更像传统的 URL，例如：`www.example.com/home` [2](https://router.vuejs.org/guide/essentials/history-mode)
+
+2. 工作原理区别：
+- Hash 模式：
+  - 使用 URL 的 hash（#）部分来模拟完整的 URL
+  - hash 部分不会被发送到服务器
+  - 基于浏览器的 hashchange 事件 [2](https://router.vuejs.org/guide/essentials/history-mode)
+
+- History 模式：
+  - 基于 HTML5 的 History API
+  - 使用 pushState 和 replaceState 方法来管理历史记录
+  - URL 更美观，更像传统的服务器端路由 [2](https://router.vuejs.org/guide/essentials/history-mode)
+
+3. 服务器配置要求：
+- Hash 模式：
+  - 不需要特殊的服务器配置
+  - 因为 hash 部分不会发送到服务器
+  - 对 SEO 不太友好 [2](https://router.vuejs.org/guide/essentials/history-mode)
+
+- History 模式：
+  - 需要服务器配置支持
+  - 需要配置所有路由都返回 index.html
+  - 否则会出现 404 错误 [2](https://router.vuejs.org/guide/essentials/history-mode)
+
+4. 服务器配置示例（History 模式）：
+
+Apache 配置：
+```apache
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>
+```
+
+Nginx 配置：
+```nginx
+location / {
+  try_files $uri $uri/ /index.html;
+}
+```
+
+5. 如何选择：
+
+- 选择 Hash 模式如果：
+  - 不想配置服务器
+  - 项目不需要考虑 URL 的美观性
+  - 对 SEO 要求不高
+
+- 选择 History 模式如果：
+  - 需要更好的 URL 外观
+  - 项目需要更好的 SEO
+  - 可以控制服务器配置
+
+6. 兼容性考虑：
+- Hash 模式：兼容性更好，支持更多的浏览器
+- History 模式：需要 HTML5 History API 支持，较新的浏览器都支持
+
+7. 迁移建议：
+如果要从 Hash 模式迁移到 History 模式：
+1. 确保服务器已正确配置
+2. 更新路由配置
+3. 测试所有路由是否正常工作
+4. 检查直接访问路由是否正常 [2](https://router.vuejs.org/guide/essentials/history-mode)
+
+在实际开发中，如果你使用的是现代前端框架（如 Next.js、Umi 等），它们通常会默认使用 History 模式并自动处理服务器配置，使开发者可以专注于业务逻辑的开发。
+
+---
+来源：Claude 3.5 Sonnet 
+
+---
+此文自动发布于：<a href="https://github.com/coderPerseus/blog/issues/24" target="_blank">github issues</a>