vue-router的实现原理hash和history

最新推荐文章于 2024-09-17 13:42:29 发布

威威大王

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量124

点赞数

文章标签： vue.js 哈希算法 javascript

本文链接：https://blog.csdn.net/dddd46464646/article/details/132463674

版权

首先实现原理有两个要求：1.无刷新 2.切换内容

1.hash 通过window监听hash值变化从而改变页面的内容点击页面退后前进也能成功渲染

<body>
    <a href="#/home">首页</a>
    <a href="#/center">个人中心</a>
    <h1 id="h1"></h1>
    <script>
        //1.无刷新 2.内容的切换
        //1.监听hash值的变化 因为hash是一个标记不会改变页面的刷新
        window.addEventListener('hashchange', function (e) {
            // 获取hash值
            let hash = location.hash
            console.log(hash);
            // 通过哈希值渲染出对应的内容
            if (hash === "#/home" || hash === "") {
                document.getElementById("h1").innerHTML = "首页"
            } else if (hash === "#/center") {
                document.getElementById("h1").innerHTML = "个人中心"
            }
        })
    </script>
</body>

2.history 通过绑定click事件传入url，函数中使用history.pushState(这是HTML5中的一个方法，允许开发者通过JavaScript向浏览器的历史记录中添加一条新的状态（state）。它接受三个参数：state对象、页面标题和URL。)

<body>
    <h1>history</h1>
    <button onclick="jump('/home')">home</button>
    <button onclick="jump('/center')">center</button>
    <h1 id="content"></h1>


    <script>
        //1.无刷新 2.内容的切换
        // history 
        // 做到这一步当我们点击是可以跳转的内容也不更新但是点击上一步下一步url会变但是页面不会变
        function jump(url) {
            history.pushState({ page: url }, "标题1111", url)
            if (url === '/home') {
                document.getElementById("content").innerHTML = "首页"
            } else if (url === '/center') {
                document.getElementById("content").innerHTML = "个人中心"
            }
        }


        // 监听popstate
        // 监听我们history.pushState({ page: url }) 点击上一步下一步渲染
        window.addEventListener('popstate', function (e) {
            console.log(e.state.page);
            // let page = e.state.page
            if (e.state.page == '/home') {
                document.getElementById("content").innerHTML = "首页"
            } else if (e.state.page == '/center') {
                document.getElementById("content").innerHTML = "个人中心"
            }
        });
    </script>
</body>