stay hungry stay foolish

SPA路由原理

SPA路由的实现在前端有两种方式:hash和history,其中hash的方式兼容想较好,history只适用于HTML5浏览器。

hash方式

此种方式通过改变hash值来实现路由的跳转,改变hash值并不会发生请求到后端,所以不需要后端配置路由。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>spa 测试</title>
    <style>
        .btn {
            text-align: center;
        }

        #content {
            width: 200px;
            margin: 20px auto 20px auto;
            border: 1px solid #cccccc;
            text-align: center;
            padding: 50px 0;
        }
    </style>
</head>

<body>
    <div id="content"></div>
    <div class="btn">
        <button id="prev">上一页</button>
        <button id="next">下一页</button>
    </div>
    <script>
        var page = 1;
        var content = document.getElementById('content');
        document.getElementById('prev').addEventListener('click', function () {
            history.back();
        });
        document.getElementById('next').addEventListener('click', function () {
            page++;
            location.hash = '#' + page;
        });
        window.addEventListener('hashchange', function () {
            var hash = location.hash.slice(1);
            page = Number(hash) || 1;
            content.innerText = '页面' + hash;
        });
    </script>
</body>

</html>

history方式

此种方式会直接更改掉地址栏的url路径,当在地址栏刷新页面时,会直接发送请求到后台,此时如果后台不存在由history API生成的url时,将返回404页面,所以要使用这种方式实现SPA路由,必须要后端配合。

<script>
    document.getElementById('next').addEventListener('click', function () {
        page++;
        content.innerText = '页面' + page;
        // pushState和replaceState不会触发popstate事件,只有使用history API后退和前进操作,或者用户在地址栏前进/后退才会触发popstate
        history.pushState({ page: page }, '', '/' + page);
    });
    window.addEventListener('popstate', function (e) {
        var state = e.state || {};
        page = state.page || 1;
        content.innerText = '页面' + state.page;
    });
</script>