面试题：VueRouter中的 hash 模式和 history 模式有什么区别

面试题：VueRouter中的 hash 模式和 history 模式有什么区别

hash模式

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

history模式

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

其他注意事向

1. 有些 App 的分享是不支持 # 的，所以不能使用 hash 模式

总结

区别	hash模式	history模式
地址栏表现	带着 # 号	标准的 url 格式，不带 #
路由跳转的实现	window.onhashchange 监听 hash 的改变	pushState 或者 replaceState Api改变路由
页面刷新	请求的地址中不携带 # 后面的内容，所以不需要后端的配合，也不会出现 404	请求的是当前地址的完整路径，需要服务器做特殊处理，否则会出现 404
兼容性	可以兼容一些低版本的浏览器	不兼容低版本浏览器