Vue-Router路由模式

发布时间 2023-08-14 16:01:49作者: Wanker

在Vue-Router中,有两种路由模式可供选择:hash模式和history模式。它们之间的主要区别在于URL的表现形式和对服务器的要求。

1、hash模式

定义:在hash模式下,URL会以一个#符号开头,后面跟随路由的路径。

例如:http://example.com/#/home。当URL的hash值发生改变时,Vue-Router会检测到变化,并相应地导航到对应的路由。

优点:

  • 支持在所有现代浏览器中运行,包括旧版本的浏览器。
  • 不需要后端服务器的特殊配置。

缺点:

  • URL中包含#符号,不太美观。
  • 在SEO(搜索引擎优化)方面不如history模式。

2、history模式

定义:在history模式下,URL会使用真实的URL路径,而不带有#符号。

例如:http://example.com/home。这需要服务器配置,以确保在前端路由变化的时候,服务器能够正确地响应相应的资源请求。

优点:

  • URL更加美观,更符合传统URL的形式。
  • 在SEO方面更有优势,可以更好地被搜索引擎收录和解析。

缺点:

  • 需要服务器的支持,必须通过后端配置,以确保在前端路由变化时服务器能正确响应资源请求。
  • 在某些情况下,如果没有正确配置服务器,刷新页面会导致404错误。

3、区别

(1)最直观的区别就是hash路由有一个 # 号,而history是没有的。

(2)改变hash值不会重新加载页面,对传给后端的url没有任何影响,因此不会重新加载页面。

(3)hash路由原理,当hash值发生改变时,并不会向服务器发送请求而是会触发onhashchange事件,从而根据hash值来修改页面内容。

(4)history路由原理,利用window.history(history.pushState或history.replaceState) 相关api实现路由跳转,从而改变页面内容。

(5)history模式开发的SPA项目,需要服务器端做额外的配置,否则会出现刷新白屏(链接分享失效)。原因是页面刷新时,浏览器会向服务器真的发出对这个地址的请求,而这个文件资源又不存在,所以就报404。