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模式需要服务器的支持；在服务器端除了静态资源外都返回项目中的根路径