1.浏览器中的hash和history:
hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。比如这个 URL:https://www.baidu.com/#a中, hash 的值为 a。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
history —— 利用了 HTML5 History 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。
vue中的两种模式相当于是使用浏览器中的特性来实现前端路由。
2.hash和history的不同:
- 它们两者之间最直观的区别就是有没有 # ,hash中有但是history模式中没有。
- hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.baidu.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。但是对于history模式要小心,如果配置不当会出现404的情况,注意后端可以设置,没有的路由就跳home。 备注:有一个插件(如下),脚手架中会自动安装,所以再用脚手架时可能会出现即使用history模式刷新也不会404的情况。