浅谈前端路由hash模式和history模式的区别

浅谈前端路由hash模式和history模式的区别

hash模式：

1.hash模式的路由中带有#号
2.hash模式通过window.onhashchange 方法监听路由的改变
3.hash模式刷新页面的时候，发送的url是不带#号后面的内容的
4.hash模式可以兼容部分低版本的浏览器
5.hash模式打包后，直接在浏览器中打开 /dist/index.html 可以正常的访问（原因是第 3 条指出的原因）

histroy模式：

1.histroy模式是指通过正常的url路径显示
2.histroy模式模式通过 pushState 和 replaceState 方式修改路由改变
3.history 模式在页面刷新的时候，会请求当前地址栏中完整的 url，这时需要服务器对这个 url 有处理
4.history 模式因为是使用的 HTML5 的新规范，所以不能兼容低版本的浏览器
5.history 模式打包后，直接在浏览器中打开 /dist/index.html 会报错（原因是第 3 条指出的原因）

总结如下图：