Vue Router Hash模式和History模式的区别
2021-11-25 本文已影响0人
hao102
表现形式不同
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()会触发该事件
- 根据当前路由地址找到对应组件重新渲染
