1、什么是路由

路由是根据不同的 url 地址展示不同的内容或页面；

2、什么是前端路由

特点：页面不刷新，前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，每跳转到不同的URL都是使用前端的锚点路由.

优点:

1.用户体验好，和后台网速没有关系，不需要每次都从服务器全部获取，快速展现给用户
2.可以再浏览器中输入指定想要访问的url路径地址。
3.实现了前后端的分离，方便开发。有很多框架都带有路由功能模块。

缺点:

1.使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
2.单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

3、什么是后端路由

浏览器在地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示, 返回不同的页面, 意味着浏览器会刷新页面，网速慢的话说不定屏幕全白再有新内容。后端路由的另外一个极大的问题就是 前后端不分离。

优点：

分担了前端的压力，html和数据的拼接都是由服务器完成。

缺点：

当项目十分庞大时，加大了服务器端的压力，同时在浏览器端不能输入制定的url路径进行指定模块的访问。另外一个就是如果当前网速过慢，那将会延迟页面的加载，对用户体验不是很友好。

4、前端路由的两种模式

(1)history 模式

利用pushState（） 和reaplaceState方法
HTML5 History Interface 中新增的两个神器 pushState() 和 replaceState() 方法（需要特定浏览器支持），用来完成 URL 跳转而无须重新加载页面，
pushState方法、replaceState方法，只能导致history对象发生变化，从而改变当前地址栏的 URL，但浏览器不会向后端发送请求，也不会触发popstate事件的执行
popstate事件的执行是在点击浏览器的前进后退按钮的时候，才会被触发

(2)hash模式

默认模式
路由的哈希模式其实是利用了window.onhashchange事件，也就是说你的url中的哈希值（#后面的值）如果有变化，就会自动调用hashchange的监听事件，在hashchange的监听事件内可以得到改变后的url，这样能够找到对应页面进行加载

  1. window.addEventListener('hashchange', () => {
  2.    // 把改变后的url地址栏的url赋值给data的响应式数据current，调用router-view去加载对应的页面
  3.    this.data.current = window.location.hash.substr(1)
  4. })