hash和histroy路由

最新推荐文章于 2024-08-13 22:07:58 发布

董不懂代码

最新推荐文章于 2024-08-13 22:07:58 发布

阅读量191

点赞数

分类专栏： js类型转换文章标签：哈希算法 javascript 前端

本文链接：https://blog.csdn.net/weixin_50284675/article/details/128524494

版权

js类型转换专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章探讨了在单页应用(SPA)中如何利用HTML锚点进行页面内部导航，并展示了使用HistoryAPI改变地址栏并管理浏览历史的方法。通过点击事件监听hashchange和popstate事件，实现页面内容动态更新。

摘要由CSDN通过智能技术生成

<div>
    <a href="#cat">跳到锚点</a>
    <br />
    <a href="http://www.baidu.com">百度</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <a href="">障碍物</a> <br />
    <pre id="cat">
        ლ(′◉❥◉｀ლ)
    </pre>
    <hr>
    <a href="#a">锚点a</a>
    <a href="#b">锚点b</a>
    <a href="#c">锚点c</a>
    <a href="#d">锚点d</a>
    <div id="view"></div>
</div>

<script>
    function showByAnchorPoint() {
        let hashVal = location.hash.substring(1);
        view.innerHTML = `<button>我是${hashVal.toUpperCase()}组件</button>`;
    }
    // 加载好之后显示初始内容
    window.onload = showByAnchorPoint;
    // 监视
    window.addEventListener('hashchange', e => {
        console.log(location.hash, '改变的锚点值');
        showByAnchorPoint();
    })


</script>

histroy Document 我是history页面

<a href="javascript:void(0)" id="btn1">跳到abc</a>
<a href="javascript:void(0)" id="btn2">跳到xxx</a>

<div id="view"></div>




<script>
     function showByAnchorPoint() {
        let pathname = location.pathname;
        console.log(pathname,history.state);
        view.innerHTML = `<button>我是${pathname.toUpperCase()}组件</button>`;
    }
    btn1.onclick = function(){
        // 改变地址栏  HTML5 historyAPI
        history.pushState({data:'123a'},'','/abc');
        showByAnchorPoint();    
    }
    btn2.onclick = function(){
        // 改变地址栏  HTML5 historyAPI
        history.pushState({data:'123x'},'','/xxx');
        showByAnchorPoint();    
    }
    // 当前进或后退,能切换页面的内容
    window.addEventListener('popstate',e=>{
        showByAnchorPoint()
    })
    window.onload = function(){
        // 获取地址栏url
        showByAnchorPoint();
    }
</script>