前端路由（router）的二种模式及区别

**前端路由（router）的二种模式及区别 **
答：hash模式和history模式
不同点：1 切换方式不同
hash： window.location.hash = 'qq' // 设置 url 的 hash，会在当前url后加上 '#qq
history: window.history.pushState 和 window.history.replaceState

    2.监听的方式不同：（addEventListen）
     hash：onhashchange
     history: onpopstate(调用history.pushState()不会触发window.onpopstate()事件，只有浏览器有动作时才会触发监听事件，（history.go /back /forward）)

     window.history.pushState(state, title, url) 
     // state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state⾥获取
     // title：标题，基本没⽤，⼀般传 null
     // url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是⼀樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。
     //如当前url是 https://www.baidu.com/a/,执⾏history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，
     //执⾏history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/
     window.history.replaceState(state, title, url)
     // 与 pushState 基本相同，但她是修改当前历史记录，⽽ pushState 是创建新的历史记录


    Hash优点：(1) 只需要前端配置路由表, 不需要后端的参与
             (2) 兼容性好, 浏览器都能支持
            (3) hash值改变不会向后端发送请求, 完全属于前端路由
   History的缺点 ：(1) 在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面，用户匹配不到静态资源的情况, 否则会出现404错误
                  (2) 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.

参考文献： https://wenku.baidu.com/view/82582a6af76527d3240c844769eae009581ba285.html