History路由的完成

history 完成路由重要依托两个API，行进或退却能够合营onpopstate事宜

• history.pushState

  • 将当前URL和history.state加入到history中，并用新的state和URL替代当前，不会形成页面革新
  • state：与要跳转到的URL对应的状况信息
  • title：title
  • url：要跳转到的URL地点，不能跨域
  • pushState会向浏览器的汗青客栈增加一个url为设定值的纪录，并指向当前项

• history.replaceState

  • 与pushState参数，寄义雷同
  • 区分在于replaceState是替代浏览器汗青客栈的当前汗青纪录为设定的url
  • replaceState不会修改浏览器汗青客栈的当前指向

代码(细致解释)

<ul>
    <li><a href="?name=red">A</a></li>
    <li><a href="?name=blue">B</a></li>
    <li><a href="?name=green">C</a></li>
</ul>
<div style='width: 100px; height: 100px;'></div>
<script>
    function setBackgroundColor(color) {
        document.querySelector('div').style.backgroundColor = color;
    }

    /**
     * [color description]
     * @type {String}
     * 1. data 参数
     * 2. title
     * 3. url
     */
    // 将页面替代成当前url的页面
    history.replaceState({
        color: 'red'
    }, '当前为A页面', "?name=a");
    setBackgroundColor("red");

    // 浏览器行进退却就会触发popstate事宜， 经由过程事宜的 state 能够获得参数值
    window.onpopstate = function (event) {
        // console.log(event.state);
        setBackgroundColor(event.state.color);
    }

    let aObj = document.querySelectorAll('a');
    aObj.forEach((item) => {
        item.addEventListener('click', function(event) {
            event.preventDefault();
            // 要求地点
            let query = this.href.split('?')[1];
            // 要求的参数值
            let color = query.split('=')[1];
            // history.state：猎取汗青栈中最顶端的state数据（即history.pushState中的第一个参数）
            if(history.state.color !== color) {
                setBackgroundColor(color);
                // 放入汗青纪录中
                history.pushState({color: color},color, location.href.split('?')[0] + '?' + query);
            }
        })
    })
</script>