vue路由hash和history的区别

vue yekong

Vue Router提供了两种路由模式:hash模式和history模式。这两种模式的主要区别在于它们如何与浏览器的历史记录(即浏览器的后退/前进按钮和URL)交互,以及URL的格式。

  1. Hash模式

    • URL格式:在hash模式下,URL会带有一个#号,例如https://wanjunshijie.com/#/page1#号及其后面的内容被浏览器视为位置标识符,不会发送到服务器。
    • 工作原理:当URL中的hash部分改变时(即#后面的部分),页面不会重新加载。Vue Router会监听hash的变化,并根据新的值渲染相应的组件,实现无刷新的页面切换。
    • 兼容性:由于hash值的变化不会导致浏览器向服务器发出新的请求,hash模式不需要服务器的特殊配置。这使得hash模式具有很好的兼容性,可以在所有支持JavaScript的浏览器上运行,包括旧版浏览器。
  2. History模式

    • URL格式:在history模式下,URL看起来更像传统的路径,例如https://wanjunshijie.com/page1。这种模式利用了HTML5 History API来实现页面的无刷新切换。
    • 工作原理:Vue Router在history模式下,通过HTML5 History API(pushStatereplaceState方法)来改变URL,而不会引起页面的重新加载。当用户手动输入地址或刷新页面时,浏览器会向服务器发送请求。因此,服务器需要配置,以便对所有可能的路由请求返回同一个index.html页面,然后由Vue Router处理路由对应的视图渲染。
    • 兼容性和配置:history模式需要服务器的支持。如果服务器没有正确配置,用户直接访问或刷新非根URL时可能会看到404错误。此外,history模式依赖于HTML5 History API,不支持旧版浏览器。

总结来说,hash模式通过URL的hash部分来实现路由,不需要服务器配置,兼容性好;而history模式提供了更干净、更像传统URL的路径,需要服务器配置,可能不支持旧版浏览器。开发者在选择时需要根据项目需求和目标用户的浏览器环境来决定使用哪种模式。

喜欢