详解前端路由的实现方式

    一、hash

•  含义： 路由的  hash  模式是利用了  window 可以监听 onhashchange 事件来实现的，也就是说  hash  值是用来指导浏览器动作的，对服务器没有影响，HTTP 请求中也不会包括  hash  值，同时每一次改变  hash  值，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。所以，hash 模式 是根据  hash 值来发生改变，根据不同的值，渲染指定DOM位置的不同数据。
•  特点

            1、url中带/#/符号
            2、可以改变URL，但不会触发页面重新加载（hash的改变会记录在  window.hisotry  中）因此并不算是一次 HTTP 请求，所以这种模式不利于 SEO 优化
            3、只能修改  #  后面的部分，因此只能跳转与当前 URL 同文档的 URL
            4、只能通过字符串改变 URL
            5、通过window.onhashchange 监听 hash 的改变，借此实现无刷新跳转的功能。
            6、每改变一次  hash （ window.location.hash）,都会在浏览器的访问历史中增加一个记录。
            7、路径中从  #  开始，后面的所有路径都叫做路由的  哈希值 并且哈希值它不会作为路径的一部分随着 http 请求，发给服务器
  

二、 history

•     含义

            history是路由的另一种模式，在相应的router配置时将mode设置为history  即可。
            history  模式是通过调用  window.history  对象上的一系列方法来实现页面的无刷新跳转。
            利用了HTML5 History Interface中新增的pushState() 和  replaceState()  方法。
            这两个方法应用于浏览器的历史记录栈，在当前已有的  back、forward、go  的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会向后端发送请求。

•      特点

            1、新的URL可以是与当前URL同源的任意 URL，也可以与当前URL一样，但是这样会把重复的一次操作记录到栈中。
            2、通过参数stateObject可以添加任意类型的数据到记录中。
            3、可额外设置title属性供后续使用。
            4、通过pushState、replaceState实现无刷新跳转的功能。
            5、路径直接拼接在端口号后面，后面的路径也会随着http请求发给服务器，因此前端的URL必须和向发送请求后端URL保持一致，否则会报404错误。
            6、由于History API的缘故，低版本浏览器有兼容行问题。