hash模式和history模式

在Vue Router中，有两种路由模式可供选择：hash模式和history模式。它们各自有一些优点和缺点，下面是它们的简要介绍：

• hash模式的原理是通过hashchange事件，通过监听hash变化来驱动界面变化。它的url中有 # 号

•   1、监听地址栏中hash变化驱动界面变化
    2、用pushsate记录浏览器的历史，驱动界面发送变化
  

• history模式的原理是通过popstate事件，通过监听浏览器历史记录变化来驱动界面变化。
  需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。

• 只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）它的url中没有 # 号

• 项目上线之后，需要在后端服务器额外配置，否则会出现404错误

•  history 模式核心借用 HTML5 history api，api 提供了丰富的 router 相关属性先了解一个几个相关的 api
   pushState 向浏览器历史纪录添加记录
   replaceState修改浏览器历史纪录中当前纪录
   popState 事件， 当 history 发生变化时触发
  

Hash模式：

优点：

• 兼容性好：Hash模式使用URL中的哈希值（#）来模拟路由，不会触发页面的刷新，因此在各种浏览器和服务器环境下都能正常工作。
• 简单配置：不需要服务器端的特殊配置，只需在前端配置即可。

缺点：

• URL不美观：由于使用哈希值，URL中会出现#符号，对于用户来说不够友好。
• 有一定冗余：每次路由切换时，URL中的哈希值会发生变化，但页面不会刷新，这可能会导致一些冗余的哈希值出现在URL中。

History模式：

优点：

• URL美观：History模式使用真实的URL路径，没有#符号，对于用户来说更加友好。
• 无冗余：每次路由切换时，URL路径会发生变化，但页面不会刷新，不会出现冗余的URL。

缺点：

• 兼容性较差：History模式依赖HTML5的History API，不支持的浏览器会导致路由无法正常工作。需要服务器端的特殊配置，以确保在路由– 刷新时能正确返回对应的页面。
• 需要后端支持：当用户直接访问History模式下的URL时，需要服务器端正确配置，以返回对应的页面，否则会导致404错误。

选择使用哪种模式取决于你的项目需求和实际情况。如果你的项目需要兼容性好且不需要美观的URL，可以选择Hash模式。如果你的项目追求更美观的URL，并且能够进行服务器端配置，可以选择History模式。

代码007普通

打赏 收藏 海报 链接