前端路由实现

发布于 2020-12-27  91 次阅读


核心思想:

通过监听地址栏的变化事件来实现资源的动态显示

前端路由有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>

试一试


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。