Vue Router Hash模式和History模式的区别

表现形式不同

hash模式路径里带有#号；符号后边是路由路径；history模式是一个正常的url；

// hash
http://www.example.com/#/router1?id=3333
//history
http://www.example.com/#/router/3333

原理区别

hash：基于锚点作为路由地址以及onhashchange事件监听锚点变化；根据当前路由地址找到对应组件重新渲染
history模式是基于HTML5中的History API实现的

  • history.pushState()；通过history.pushState()方法改变地址栏 //IE10以后才支持
  • 监听popstate事件；pushState方法和replaceState并不会触发popState；在使用浏览器的前进后退，history.back(),history.forward()会触发该事件
  • 根据当前路由地址找到对应组件重新渲染

history模式需要服务器的支持；在服务器端除了静态资源外都返回项目中的根路径

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容