核心思想：
通过监听地址栏的变化事件来实现资源的动态显示
前端路由有2种模式：
hash模式
hash路由模式是这样的：http://xxx.abc.com/#/xx。 有带#号，后面就是hash值的变化。改变后面的hash值，它不会向服务器发出请求，因此也就不会刷新页面。并且每次hash值发生改变的时候，会触发hashchange事件。因此我们可以通过监听该事件，来知道hash值发生了哪些变化。
window.addEventListener('hashchange', ()=>{
// 通过 location.hash 获取到最新的 hash 值
console.log(location.hash);
});
history模式
HTML5的History API为浏览器的全局history对象增加了该扩展方法。它是一个浏览器（bom）的一个接口，在window对象中提供了onpopstate事件来监听历史栈的改变，只要历史栈有信息发生改变的话，就会触发该事件。
history.pushState({},title,url); // 向历史记录中追加一条记录
history.replaceState({},title,url); // 替换当前页在历史记录中的信息。
window.addEventListener('popstate', function(event) {
console.log(event)
})
注：
浏览器地址没有#， 比如(http://localhost:3001/a); 它也一样不会刷新页面的。但是url地址会改变。但它在服务器没有配置的情况下，不能手动刷新，否则返回404页面
hash路由体验
<div>
<div>
<a href="#/a">去a页面</a>
<a href="#/b">去b页面</a>
<a href="#/c">去c页面</a>
<a href="#/d">去d页面</a>
</div>
<div id="router-view">
<!-- 放页面内容的 -->
</div>
</div>
<script>
// 1. 获取改变内容的dom对象，方便待会操作
let cnt = document.getElementById("router-view");
// 2. 默认渲染，刚打开页面默认渲染a页面
render("/a");
// 3. 渲染方法
function render(route) {
switch (route) {
case "/a":
cnt.innerHTML = "这是a页面的内容";
break;
case "/b":
cnt.innerHTML = "这是b页面的内容";
break;
case "/c":
cnt.innerHTML = "这是c页面的内容";
break;
case "/d":
cnt.innerHTML = "这是d页面的内容";
break;
default:
cnt.innerHTML = "404：not found";
break;
}
}
// 4. 监听hash改变事件
window.addEventListener("hashchange", () => {
// console.log(location.hash.slice(1));
render(location.hash.slice(1))
});
</script>试一试
Comments | NOTHING