最基础前端路由实现，事件popstate使用 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <h4>使用 h5 实现前端路由</h4>
        <ul>
            <li>
                <a onclick="home()">首页</a>
            </li>
            <li>
                <a onclick="message()">消息</a>
            </li>
            <li>
                <a onclick="mine()">我的</a>
            </li>
        </ul>
        <div id="showContent" style="height:240px;width:200px;background-color:red">
            home
        </div>
    </body>

    <script type="text/javascript">
        function home() {
            // 添加到历史记录栈中
            history.pushState({
                name: 'home',
                id: 1
            }, null, "?page=home#index")
            showCard('home')
        };

        function message() {
            history.pushState({
                name: 'message',
                id: 2
            }, null, "?page=message#haha")
            showCard('message')
        }

        function mine() {
            history.pushState({
                id: 3,
                name: 'mine'
            }, null, "?name=tigerchain&&sex=man")
            showCard('mine')
        }

        // 监听浏览器回退 并且刷新到指定内容
        window.addEventListener('popstate', function(event) {
            var content = "";
            if(event.state) {
                content = event.state.name;
            }
            console.log(event.state)
            console.log("history 中的历史栈中的 name ：" + content)
            showCard(content)
        })
        // 此方法和上面的方法是一毛一样的，只是两种不同的写法而已
        // window.onpopstate = function (event) {
        //   var content = "";
        //   if(event.state) {
        //     content = event.state.name;
        //   }
        //   showCard(content);
        // }

        function showCard(name) {
            console.log("当前的 hash 值是：" + location.hash)
            document.getElementById("showContent").innerHTML = name;
        }
    </script>

</html>
View Code

 

 

 

出处：https://www.jianshu.com/p/9a7d79249741

posted on 2019-07-11 19:27  JonRain0625  阅读(1239)  评论(0)  编辑  收藏  举报