持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情
本文介绍了hash和history两种路由模式的原理、优缺点和区别
一、Hash模式
原理： 基于浏览器的hashchange事件，地址变化时，通过window.location.hash 获取地址上的hash值；并通过构造Router类，配置routes对象设置hash值与对应的组件内容。
优点
- hash值会出现在URL中, 但是不会被包含在Http请求中, 因此hash值改变不会重新加载页面
- hash改变会触发hashchange事件, 能控制浏览器的前进后退
- 兼容性好
缺点
- 地址栏中携带#，不美观
- 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL
- hash有体积限制，故只可添加短字符串
- 设置的新值必须与原来不一样才会触发hashchange事件，并将记录添加到栈中
- 每次URL的改变不属于一次http请求，所以不利于SEO优化
二、History模式
原理： 基于HTML5新增的pushState()和replaceState()两个api，以及浏览器的popstate事件，地址变化时，通过window.location.pathname找到对应的组件。并通过构造Router类，配置routes对象设置pathname值与对应的组件内容。
优点
- 没有#，更加美观
- pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL
- pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中
- pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中
- pushState() 可额外设置 title 属性供后续使用
- 浏览器的进后退能触发浏览器的popstate事件，获取window.location.pathname来控制页面的变化
缺点
- URL的改变属于http请求，借助history.pushState实现页面的无刷新跳转，因此会重新请求服务器。所以前端的 URL 必须和实际向后端发起请求的 URL 一致。如果用户输入的URL回车或者浏览器刷新或者分享出去某个页面路径，用户点击后，URL与后端配置的页面请求URL不一致，则匹配不到任何静态资源，就会返回404页面。所以需要后台配置支持，覆盖所有情况的候选资源，如果 URL 匹配不到任何静态资源，则应该返回app 依赖的页面或者应用首页。
- 兼容性差，特定浏览器支持
三、hash路由和history路由的区别
hash路由和history路由的区别有以下三点：
1.表现形式不同
hash路由模式下url地址中有#。history路由模式下url地址中没有#，看起来更简洁
2.http请求中请求地址不同
hash路由模式发送的http请求不会包括#后面的路径。history路由模式下发送的http请求会包括整个url，需要后端做额外的配置，不然会找不到资源，报404错误
3.实现原理不同
hash路由是通过监听hashChange事件实现的。history路由是通过监听popState事件以及调用pushState方式修改历史记录栈实现的，使用到了HTML5的新特性，因此需要考虑浏览器兼容性问题(IE >= 10)
