前端路由hash history

一眨眼就四月份啦~~~暴击！！三月的面试没有很顺利，，，感觉运气也蛮重要的，，目前只有cvte的offer，希望四月冲鸭！！！！大厂！！快看我！

知识储备

ajax

• 异步数据请求不刷新页面

单页面应用

• 页面交互不刷新，连路由跳转也不刷新

1. 后端路由：

• 好处：安全性好，SEO好。
• 缺点：加大服务器的压力，不利于用户体验，代码冗合。

2. 前端路由：

• 缺点：使用浏览器的前进，后退键时会重新发送请求，来获取数据，没有合理地利用缓存

前端路由 Hash History

hash

1. hash（url中#后面的部分）虽然出现在url中，但不会包含在http请求中，对后端完全没有影响，因为改变hash不会重新加载页面

2. 后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面

3. hash值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash的切换。
4. 当hash改变时，会触发window.onhashchange，监听该事件，对页面进行更新

• 触发hashchange事件的方式有两个：通过a标签，< a href=" ">srtian，通过location.hash进行赋值，直接改变url

history

• 在当前已有的back，forward，go基础上，html5 history interface 新增了两个方法pushState将url直接压入历史记录栈，replaceState将url直接替换成当前历史记录栈。
• pushState()、replaceState() 方法接收三个参数：stateObj、title、url，这里的url不支持跨域
• 调用history.pushState()或者history.replaceState()不会触发popstate事件. onpopstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)
  hash，history对比

1. history设置的 url 可以是同源下的任意 url ；而 hash 只能修改 # 后面的部分，因此只能设置当前 url 同文档的 url。
2. hash兼容性好，history美观
3. history设置的新的 url 可以与当前 url 一样，这样也会把记录添加到栈中；hash 设置的新值不能与原来的一样，一样的值不会触发动作将记录添加到栈中。
4. history 在刷新页面时，如果服务器中没有相应的响应或资源，就会出现404。因此，如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。history因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。
5. hash 模式下，仅 # 之前的内容包含在 http 请求中，对后端来说，即使没有对路由做到全面覆盖，也不会报 404。