前端路由理解

前言：啰嗦几句，我觉得学一个东西应该至少从三个方面出发，而不是只简单学习它的用法，首先这个东西是什么？用来干什么？如何实现的？

一、什么是前端路由？

1. 后端路由：用来描述url与处理函数或者说是封装了某一业务逻辑代码之间的映射关系。拿javaweb来说，我们通过某一url向java后台发送请求，这个请求要做的业务将有controller来进行业务处理，其中路由就是用来描述请求路径与这个controller之间的关系。注意，url与controller是多对一的关系，也就是说一个controller可对对应多个url。
2. 前端路由：前端路由是实现单页应用SPA的基石，前端路由概念来源于后端，而不同与后端，前端路由是用来描述url与UI之间的映射关系。拿Vue来说，vue-router就是用来描述url与组件之间的映射关系。

二、前端路由用来干什么？

      上面已经说了，前端路由就是用来描述url与UI之间的映射关系的，用来控制SPA应用的页面切换。

三、怎么实现？

• 先说说多页应用时切换页面的方式，在传统的多页应用中，我们通过a标签href或者js的location对象来改变url的值，当url值变化时，从而浏览器向服务器发送请求，服务器返回页面数据，浏览器进行页面渲染，从而实现页面切换。
• 要实现SPA路由，首先我们得能监听路由的变化，路由变了还不能是页面进行请求

hash

hash是url后面#以及#后面的部分，hash部分的值改变并不会，浏览器不会发起请求刷新页面，同时可以通过hashchange事件来监听hash的变化，通过浏览器前进后退改变 URL、通过<a>标签改变 URL、通过window.location改变URL，这几种情况改变 URL 都会触发 hashchange 事件。vue-router的hash模式就是基于这个实现。

history

history 提供了 pushState 和 replaceState 两个方法，这两个方法改变 URL 的 path 部分不会引起页面刷新。history 提供类似 hashchange 事件的 popstate 事件，但 popstate 事件有些不同：通过浏览器前进后退改变 URL 时会触发 popstate 事件，通过pushState/replaceState或<a>标签改变 URL 不会触发 popstate 事件。好在我们可以拦截 pushState/replaceState的调用和<a>标签的点击事件来检测 URL 变化，所以监听 URL 变化可以实现，只是没有 hashchange 那么方便。