父页面监听iframe路由变化_前端路由原理

对于前端路由应该都很熟悉了，开发过spa应用的应该都用过，只是很少人去查一下前端路由实现的原理。

前端路由的实现核心问题有两个，一个是改变url不刷新，另一个是监听url变化。主要靠的就是hash和history两个方式。

先看看hash，hash属性是url的锚部分，从#开始的部分，以前很多时候用来页面的锚点导航。hash改变，页面不会刷新。js也提供了hashchange事件用来监听urlhash的变化。

先看个效果：

代码：

<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变化，然后做相应的操作。有一点要注意，通过浏览器前进后退、a标签、location这几种情况改变 url的hash 都会触发 hashchange 事件。还有，因为刷新hash是不变的，必须立马执行一次方法，一般监听DOMContentLoaded的时候去执行，我这边是直接执行了。

history实现就比较复杂一些，history提供了pushState和replaceState两个api，通过这两个方法改变url不会刷新页面。但是监听url变化的事件popstate，只能是浏览器前进后退。所以我们要通过其他方法实现监听。

效果：

代码：

<a href="/home">home</a>
<a href="/about">about</a>
<div id="app"></div>

window.addEventListener('popstate', popState);
var router = document.getElementById('app');
popState();
var aList = document.querySelectorAll('a[href]');
for(let i = 0;i < aList.length;i++){
    aList[i].addEventListener('click', function (ev) {
        ev.preventDefault();
        history.pushState(null, '', aList[i].getAttribute('href'))
        popState();
     })
}
function popState() {
    router.innerText = location.pathname;
}

pushState换成replaceState效果是一样的。这边通过监听a标签的点击事件，然后阻止默认事件实现a标签的路由。

其实前端路由实现的原理很简单，只是要结合不同技术去拓展。