hash路由和history路由的区别

vue-router（前端路由）有两种模式，hash模式和history模式

history和hash模式对比

相同点:都能实现页面的跳转功能

不同点:

(1)路径格式 : history模式的path路径不带#号,hash模式的path带#号

(2)实现原理 :

history模式history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的.

hash模式是通过监听hashchange事件来实现的

hash模式兼容性好,history的兼容性比hash模式差一点(底层使用的API是HTML5的API,对浏览器有一定的要求)

(3)项目上线之后由区别 history开发的项目,在打包上线之后,需要后端的配置来支持,不然就会出现404错误页面

为什么会出现404页面?

(1).history访问这个地址时,例 http://www.xxx.com/find, 后端收到的 req.url 是 find,但是我们是单页应用程序,只有一个资源是index.html,没有资源叫/find,所以会报404

(2).hash访问这个地址时, 例 http://www.xxx.com/#/find,后端收到的 req.url 是/,有一个资源是index.html,所以能正常显示