vue中hash和history路由的区别

hash路由模式

Hash 路由模式是使用 URL 中的 hash 值实现前端路由，例如 #/home、#/about，每次 URL 变化都会触发页面的刷新。hash值变化不会刷新页面；兼容到ie8及以上

history路由模式

history模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中

需要与后端配合、后端可以拿到路由信息

兼容到ie10及以上

原理：

hash：当hash值发生改变时，并不会向服务器发送请求而是会触发浏览器的onhashchange事件，从而根据hash值来修改页面内容

history：利用h5新增API --- window.history（history.pushState或history.replaceState）以及onPopstate，history 需要后端配合，否则页面刷新，或者根据路径直接访问项目会报404错误

区别

1、hash路由地址栏URL上有“#”，而history路由没有；

2、刷新操作时，hash路由会加载到地址栏对应的页面，而history路由一般会出现404错误

3、hash支持一些低版本的浏览器，而history不支持。

history为何需要后台配合？

采用的是哈希模式，不会出现404，原因是 url 中 # 号后面（即hash值）的内容不会发给后端当作资源路径请求服务器。而history则相反，会当作路径请求服务器，服务器上没有就报了404

History 路由模式的优点

1、URL 地址更直观：让用户在前进和后退时看到正确的 URL 地址。

2、seo 优化：搜索引擎对 HTML5 history API 更友好，对单页应用进行搜索引擎优化时容易实现。

3、体验更好：用户在前进后退时不用再次加载页面，更流畅的页面体验。

 History 路由模式的缺点

1、浏览器兼容性：HTML5 history API 不能在低版本浏览器中使用，需要考虑兼容性问题。

2、维护代码：使用 History 路由模式实现路由功能需要更多的代码维护，代码实现难度更高。

hash路由模式的优点

兼容性好：Hash 路由模式适用于不支持 HTML5 history API 的低版本浏览器。

简单实现：Hash 路由模式比 History 路由模式实现简单，不用考虑浏览器兼容性问题。

浏览器支持：所有浏览器都支持 URL 中的 hash 值，可以方便的实现路由功能。

hash路由模式的缺点 

1、URL 不直观：用户看到的 URL 地址不够直观，可读性差。

2、SEO 受影响：对于单页应用来说，使用 Hash 路由模式实现路由功能时，SEO 优化会受到影响。

3、刷新页面：每次 URL 变化都会触发页面的刷新，用户体验不够流畅。