路由

路由其实根据url分配不同的资源或者说对资源的一种定位，在前端三大框架（vue,react,angular）中分别使用了vue-router，react-router，angular/router去各自实现了自己的路由逻辑，但其实底层原理是一样的

hash路由

核心就是利用location.hash 和hashchange event去实现的前端路由跳转，同时链接上会有一个#号

// 在跳转后会得到跳转前和当前url
window.onhashchange = (e) => {
	console.log(e.oldUrl, e.newUrl);
}
// 这样就可以触发hashchange回调了
location.hash = '#test';

特点：

1. #是链接上的一部分，请求的时候如果不特意加上，不会被带到服务器
2. hash刷新时，页面不会向服务器发送请求
3. 每次hashchange的时候，都会在浏览器的访问历史中增加一个记录，所以可以通过浏览器的前进后退来管理页面

history路由

链接上不会有#，路由管理是通过popState和history api去管理的，hisotry的请求在每次刷新都会向服务器去请求，所以服务端要注意有一个兜底返回首页的操作

history api有以下几个api：

1. history.go 可以指定返回的个数，-1就是返回上一级
2. history.forward 前进到下一个路由
3. history.back 返回上一个路由
4. pushState 往路由中加入一个堆栈，并且跳转，不刷新页面
5. replaceState 替换当前路由，不刷新页面

特点：

1. 是一个常规的链接
2. 只有pushState和replaceState不会去刷新页面
3. popState不能监听到pushState和replaceState的事件
4. 刷新页面向服务器请求资源，资源不存在会404，服务器要兜底

区别

1. hash路由链接有hash，并且是一个纯客户端路由，history链接一般没hash，需要服务端进行兜底操作，否则页面会404
2. api不同，hash路由监听hashchange，history监听popstate，并且history有提供比较多api进行页面跳转管理，hash需要自己去管理这些堆栈
3. hash路由对seo不友好