JS完成一个单页面应用

这个应用得用history.pushState和history.replaceState

pushState的定义

• 首先假设你在访问网站时，会把你浏览的网站记录放入到一个数组里；pushState可以往这个数组里插入记录（具体怎么写看MDN），这个记录不会去跳转，但是会显示到url上。

replaceState的定义

• 替换数组里的信息

可以开始实战了

<style>
        * {
            margin: 0
        }

        section {
            height: 100vh;
            display: none;
        }

        section:nth-child(odd) {
            background-color:
                blue;
        }

        .show {
            display: block;
        }
    </style>
    <section class="show">
        <h1>page 0</h1>
        <button class="btn1">push to page1</button>
    </section>
    <section>
        <h1>page 1</h1>
        <button class="btn3">push to page2</button>
        <button class="btn2">replace to page2</button>
    </section>
    <section>
        <h1>page 2</h1>
    </section>
    <script>
        const $ = e => document.querySelector(e)
        const $$ =  e => document.querySelectorAll(e)
        function show(i) {
            $$('section').forEach( v => v.classList && v.classList.remove('show'))
            $$('section')[i].classList.add('show')
        }
        $('.btn1').onclick =  (e) => {
            history.pushState({page:1},'','/1')
            show(1)
        }
        $('.btn3').onclick = (e) => {
            history.pushState({page:2},'','/2p')
            show(2)
        }
        $('.btn2').onclick = (e) => {
            history.replaceState({page:2},'','/2r')
            show(2)
        }
    </script>