HashRouter 和 HistoryRouter的区别和原理

HashRouter 和 HistoryRouter的区别和原理

vue-router是Vue官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。vue-router默认 hash 模式，还有一种是history模式。

原理：

1. hash路由：hash模式的工作原理是hashchange事件，可以在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件。vue-router默认的是hash模式—使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新加载,也就是单页应用了,当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作

   对于hash模式会创建hashHistory对象,在访问不同的路由的时候,会发生两件事:
   HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶,和HasHistory.replace()替换到当前栈顶的路由

2. history路由：

   主要使用HTML5的pushState()和replaceState()这两个api结合window.popstate事件（监听浏览器前进后退）来实现的,pushState()可以改变url地址且不会发送请求,replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改

区别：

1. hash模式较丑，history模式较优雅
2. pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL
3. pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中
4. pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串
5. pushState可额外设置title属性供后续使用
6. hash兼容IE8以上，history兼容IE10以上
7. history模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致404错误

使用方法:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<script>         // hash路由原理         // 监听hashchange方法         window.addEventListener('hashchange',()=>{             div.innerHTML = location.hash.slice(1)         })<br><br>         // history路由原理         // 利用html5的history的pushState方法结合window.popstate事件（监听浏览器前进后退）         function routerChange (pathname){             history.pushState(null,null,pathname)             div.innerHTML = location.pathname         }         window.addEventListener('popstate',()=>{             div.innerHTML = location.pathname         }) </script>