vue3.x教程：Router路由模式：hash模式和history模式 作者：马育民 • 2026-07-31 22:43 • 阅读：10000 # hash模式 ### URL URL后面会跟一个 `#`，例如： ``` http://example.com/#about ``` ### 工作原理 基于浏览器的 `location.hash` 属性，该属性可获取 url 中 `#` 后面的部分。 当 URL 中的 hash 部分发生变化时，Vue Router 会监听到这个变化，并相应地切换视图。 ### 好处 - hash 模式不需要后端支持，即：部署到 Nginx、apache、tomcat时，**不需要额外配置** - **浏览器兼容性较好**，支持不同的浏览器 ### 缺点 - URL 美观度： URL 中带有 # 符号，可能不够美观。 - SEO 不友好： 对搜索引擎的优化相对较差，因为搜索引擎不会将哈希部分的内容作为独立的页面来处理。 ### 应用场景 hash 模式通常用于 **前端路由**，不需要配置服务器 # history模式 ### URL 看起来和普通的 HTTP URL 一样，例如： ``` http://example.com/about ``` ### 工作原理 History 模式使用浏览器的 History API，通过修改浏览器的历史记录来实现前端路由的切换。在这种模式下，需要确保在任何路径下都返回同一个 HTML 文件，以便 Vue Router 能够正确处理路由。 ### 好处 - URL 美观度： URL 不带有 # 符号，看起来像传统的网站 - SEO 友好： 对搜索引擎的优化更好，因为搜索引擎能够更好地处理没有哈希部分的 URL ### 缺点 - 浏览器兼容性不好，HTML5之后支持 - 刷新页面 或 直接访问某个路由时，需要后端支持，即：部署到 Nginx、apache、tomcat时，**需要额外配置服务器** **原因：** 比如访问下面链接： ``` http://example.com/about ``` web服务器会找 `about` 目录下的默认首页：`index.html` 等 由于 `/about` 是vue的路由，根本 **不存在上面的目录和文件**，随意会报错 **404** # 选择 - 若没特殊需求，用 `hash` 模式即可，简单方便，部署时不需要配置服务器 - 如果想路径中没有 `#`，更好的 SEO，则选择 `history` 模式（部署时，需要配置服务器） 参考： https://blog.csdn.net/weixin_42554191/article/details/136546714 https://www.quanxiaoha.com/vue3/vue3-router-mode.html 原文出处：http://malaoshi.top/show_1GW3mLEqTeyP.html