前端面试题---vue router 哈希模式和历史模式有什么区别
Vue Router 提供两种路由模式:它们的主要区别在于 URL 的表现形式以及需要的服务器配置。
1. 哈希模式)
URL 格式:http://example.com/#/home
-
在 URL 中使用 # 符号来分隔路径和页面,# 后面的部分不会被浏览器视为实际路径。
-
服务器配置:
不需要特别配置服务器,因为 # 后面的部分不会发送到服务器,所有请求都指向同一个页面。 -
优点:
简单,不需要额外的服务器配置,兼容性好,适用于没有控制服务器的情况。 -
缺点:
URL 中包含 # 符号,看起来不够干净,影响用户体验。
2. 历史模式
URL 格式:http://example.com/home
URL 看起来更干净,没有 # 符号,像传统的多页面应用。
-
服务器配需要服务器支持 HTML5 的 history.pushState,否则会出现 404 错误,因为直接刷新或访问子路由时,服务器需要返回正确的 HTML 页面。
-
优点:
更美观、清晰的 URL,符合传统 Web 应用的标准。 -
缺点:
需要服务器配置支持,否则可能会导致页面刷新时报 404 错误。
总结:
哈希模式:不需要服务器配置,适合简单应用,但 URL 中有 #。
历史模式:更清晰的 URL,但需要配置服务器支持 HTML5 历史记录。