路由最先是在后端出现的，之前是通过服务端渲染返回页面。
响应过程如下：
- 浏览器发出请求
- 服务端监听端口请求，解析url路径
- 根据服务器的路由配置，返回相应信息（html，图片，json数据）
- 浏览器根据响应头的Content-Type来决定如何解析数据
// Content-Type
Content-Type: text/html;charset=utf-8 // html文件
Content-Type: text/css // css文件
Content-Type: text/javascript // js文件
Content-type: application/javascript // js文件
Content-type: application/x-javascript // js文件
Content-type: application/json;charset=utf-8 // json 文件
Content-Type: image/x-icon // favicon.icon
Content-Type: image/png // png图片
Content-Type: image/gif // gif图片
Content-Type: image/ipeg // jpeg图片
简单地说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。
前端路由的来源
- 90年代，大多数的网页都是通过直接返回HTML的，每次用户的更新操作都需要重新刷新页面，非常影响交互体验
- ajax（Asynchronous JavaScript And XML）的出现，用户不需要刷新页面，从而异步的更新，体验带来了非常大的提升
- 异步交互的更高级版本就是SPA（single-page application）-单页应用。单页应用不仅仅在当前页面交互是无刷新的，连页面的跳转都是无刷新的，为了实现单页应用，就有了前端路由。SPA的概念是伴随着MVVM出现的，也就出现优秀的vue和react等框架
前端路由实现原理
本质上就是检测url的变化，截获url地址，然后解析匹配路由规则。
hash（‘#’）模式
但是会有疑问：url每次变化都会刷页面啊？页面都刷新了，JavaScript怎么检测和截获url？
通过hash来实现，"#"来实现
https://juejin.im/timeline#test
"#"并不会导致浏览器向服务器发送请求，也不会刷新页面。仅仅是页面的url发生了变化，另外url中hash的变化，还会触发hashchange事件，通过这个事件可以知道hash值发生的变化
通过hash的模式来实现路由，流程如下
hash的实现相对来说方便，并且不需要服务端来支持
history模式
- html5提供了pushState和replaceState方法，这两个方法改变URL的path部分不会引起页面刷新。用history实现的方式，单页路由的url就没有‘#’，URL就会变得美观。但是当用户刷新页面之类的操作时，浏览器会给服务器发送请求，会出现页面丢失的情况。为了避免出现这种情况，需要服务端支持，需要把所有路由重定向到根页面。vue-router中history模式下的后端配置
- html5提供类似hashchange事件的popstate事件。
通过history的模式来实现路由，流程如下
我只是个搬运工
