路由这个概念最初是由后端提出来的，在我们没有SPA单页面应用之前，使用的一直都是后端路由，根据不同的路由返回不同的页面，后来随着单页面应用的诞生，开始有了前端路由，实现不刷新但是更新页面的效果
vue-router是专为Vue打造的路由管理工具
vue-router提供三种路由模式
hash模式
- 默认模式，通过路径中的hash值来控制路由跳转，不存在兼容问题
history模式
- H5新增的 history API，相对hash而言，不会显示#号，但是需要服务器端配置
abstract模式
- 支持javascript的所有运行环境，常指Node.js服务器环境
hash模式实现原理
示例：http://www.haochenguang.cn/#/home
在正常路径后跟一个 # 号，匹配 # 后边的路径为前端路由，通过
window.onhashchange方法来操控路由改变的时候切换内容
onhashchange 方法的触发时机
- 直接更改浏览器地址，在最后面增加或改变#hash；
- 通过改变location.href或location.hash的值；
- 通过触发点击带锚点的链接；
- 浏览器前进后退可能导致hash的变化，前提是两个网页地址中的hash值不同。
<body>
<ul>
<li>
<a href="#/home">home</a>
</li>
<li>
<a href="#/list">list</a>
</li>
<li>
<a href="#/detail">detail</a>
</li>
</ul>
</body>
<script>
window.onhashchange = function() {
// 做页面切换渲染等
console.log(location.href);
console.log(location.hash);
}
</script>
通过点击
a标签，传递一个hash值，然后通过window.onhashchange方法来监听hash的变化，然后在这个事件触发的时候，根据location.hash来动态的修改单页面应用的内容即可
history模式实现原理
示例：http://www.haochenguang.cn/home
看起来与后端路由没有任何区别，在
window.history这个对象中，包含浏览器的历史，而在HTML5中，新增了history.pushState和history.replaceState，通过这两个API可以改变url地址且不会发送请求，同时还有window.onpopstate事件，实现原理与hash相似，只不过因为没有了 # 号，所以刷新页面还是会向服务器发送请求，而后端没有对应的处理措施的话，会返回404，所以需要后端配合
window.onpopstate事件的触发时机
- 仅仅调用pushState方法或replaceState方法 ，并不会触发该事件；
- 只有用户点击浏览器倒退按钮和前进按钮，或者使用JavaScript调用back、forward、go方法时才会触发。
- 另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。
<body>
<ul>
<li>
<a href="/home">home</a>
</li>
<li>
<a href="/list">list</a>
</li>
<li>
<a href="/detail">detail</a>
</li>
</ul>
</body>
<script>
document.querySelectorAll('a').forEach(item => {
item.onclick = function (e) {
e.preventDefault();
let link = item.getAttribute('href');
window.history.pushState({link}, link, link);
};
});
window.addEventListener('popstate', function (e) {
console.log(e.state);
console.log(location.href);
})
</script>
当点击浏览器的后退或前进按钮，或者调用history上的go、back方法时，就会触发事件，打印出对应的数据，e.state 中就存放着pushState方法中的state对象
通过在修改路由信息的同时执行切换DOM的操作，来实现了路由切换
abstract模式实现原理
abstract模式是不依赖于浏览器环境，所以没有使用hash或者history等浏览器才会提供的API，而是VueRouter内部使用数组进行模拟了路由管理，在node环境，或者原生App环境下，都会默认使用abstract模式，VueRouter内部会根据所处的环境自行判断，默认使用hash模式，如果检测到没有浏览器API的时候，就会使用abstract模式。
网友评论