对于前端路由应该都很熟悉了,开发过spa应用的应该都用过,只是很少人去查一下前端路由实现的原理。
前端路由的实现核心问题有两个,一个是改变url不刷新,另一个是监听url变化。主要靠的就是hash和history两个方式。
先看看hash,hash属性是url的锚部分,从#开始的部分,以前很多时候用来页面的锚点导航。hash改变,页面不会刷新。js也提供了hashchange事件用来监听urlhash的变化。
先看个效果:
![8e3272c49f16007ea722e281ce4d6872.gif](https://i-blog.csdnimg.cn/blog_migrate/bac625618617a15b6596184df5eed170.gif)
代码:
<a href="#home">home</a>
<a href="#about">about</a>
<div id="app"></div>
window.addEventListener('hashchange', onHashChange);
onHashChange();
function onHashChange() {
let router = document.getElementById('app');
router.innerText = location.hash;
}
很简单,监听hash变化,然后做相应的操作。有一点要