路由-hash和history模式的区别

Vue-Router有两种模式：hash模式（默认）和history模式。

hash模式

格式

URL中带着#，如http://www.baidu.com/#/vue，hash值是#/vue

特点

1. hash路由被称为前端路由，兼容性好，单页面应用SPA的标配。
2. hash值会出现在URL中，但不会出现在HTTP请求中（仅hash符号之前的URL会被包含在请求中），因而对后端无影响（即改变hash值，也不会重新加载页面）

原理：onhashchange()事件

window.onhashchange = function(e){
	console.log(e.oldURL,e.newURL)
	let hash = location.hash.slice(1);
}
1
2
3
4

作用：

1. 页面的hash值发生变化时，浏览器监听事件的改变并按规则加载相应的代码。
2. 即便没有没有请求后端，但页面的hash值也会和对应的URL关联起来。
3. hash值变化所对应的URL会被浏览器记录下来（因而能实现浏览器的前进和后退）。

history模式

格式

http:www.baidu.com/vue

特点

1. 使用传统的路由分发模式，即用户在键入一个URL时，服务器会接受这个请求，并解析这个URL，然后做出相应的逻辑处理。
2. 需要后端支持，在刷新页面时，如果没有相应的二路由或资源，就会刷出404.

API：修改历史状态&切换历史状态

1. 修改历史状态
   • pushState()
   • repalceState()
   • pushState()和repalceState()对历史记录进行修改时，浏览器不会立即向后端发送请求。
   • 如果要做到改变URL但不刷新页面的效果，可以pushState()和repalceState()
2. 切换历史状态
   • forward() 前进
   • back() 后退
   • go() 跳转

直接修改hash和调用history.pushState()区别

1. pushState()设置的新URL可以与当前URL是同源的任意URL；hash只能修改#后面部分，即只能设置与当前URL通文档的URL
2. pushState()设置的新URL可以与当前URL一样，记录也会被添加到栈中；hash设置的新URL必须与当前URL不一样才会触发动作将记录添加到栈中
3. pushState()通过stateObject参数可以添加任意类型的数据到记录中；hash只能添加短字符串
4. pushState()可额外设置title属性供后续使用