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

前端路由的功能

• 改变url不向服务器发送请求
• 检测url的变化
• 解析url的信息来匹配路由规则
• hash模式和history模式都能够实现这个功能

hash模式

• 指的就是#和之后的字符
• hash也称作锚点，本身是作为页面定位的，可以是id对应元素显示在可视区域内。
• hash改变不会向浏览器发送请求
• hash改变会触发hashChange事件
• 浏览器的前进和后退，能够控制hash值
• html5 的history之前，都是使用hash来实现前端路由的
• hash本来是用来做页面定位的，如果用来做路由的话，锚点功能就不能用了
• hash的路由传参，有体积的限制，因为传参基于url
• hash之后的内容，不会包含在请求中
• 只能修改#之后的，所以只能设置与当前同文档的url
• 设置与当前相同的url，历史记录不会增加

history模式

• 路由传参，可以放在url里面，也可以单独放在一个对象里面
• 改变不会向浏览器发送请求
• 改变会触发onpopstate事件
• 可以设置当前同源文档的任何url
• pushState设置与当前相同的url，历史记录还是会增加
• 需要后端配合，增加一个覆盖所有情况的候选资源，如果匹配不到任何资源可以指向index.html。否则用户刷新页面，就会404