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

Posted 2022-04-05 jonrain0625

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了最基础前端路由实现，事件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

以上是关于最基础前端路由实现，事件popstate使用的主要内容，如果未能解决你的问题，请参考以下文章

vue-learning：37 - router - 目录

使用hash和history实现前端历史状态切换，触发事件驱动函数来完成部分数据的加载（使用hash和history实现前端路由切换,含完整源码+注释）

javascript基础修炼——前端路由的基本原理

router.back方法能被监听吗

单页面路由实现原理-history

前端路由机制