hash与history的介绍

最新推荐文章于 2023-02-15 12:03:19 发布

摩羯座**

最新推荐文章于 2023-02-15 12:03:19 发布

阅读量101

点赞数

分类专栏：笔记文章标签：哈希算法 javascript 前端

本文链接：https://blog.csdn.net/weixin_48864616/article/details/122462200

版权

笔记专栏收录该内容

102 篇文章 0 订阅

订阅专栏

hash
案例介绍

<body>
    <div id="app">
       <a href="#/home">首页</a>
       <a href="#/about">关于</a>

       <!-- 渲染到该div下面 -->
       <div id="router-view">

       </div>
    </div>
    <script>
          //获取view
          const routerView = document.getElementById("router-view");
          //每当hash值发生变化 就会触发hashchange是事件
          window.onhashchange = function(){
              //获取hash值
              let hash = location.hash;
              //根据hash值的不同 给用户显示不同的内容
              if(hash == "#/home"){
               routerView.innerHTML = "<h1>欢迎来到首页</h1>"
              }else if(hash == "#/about"){
                  routerView.innerHTML = "<h1>这是关于我们首页</h1>"

              }else{
                  routerView.innerHTML = "<h1>404 孩子找不到</h1>"
              }
          }
    </script>

history
案例介绍

<body>
    <div>
        <button onclick="linkTo(1)">首页</button>
        <button onclick="linkTo(2)">关于我们</button>
        <!-- 根据url的不同 在此div展示不同的内容 -->
        <div id="router-view"></div>
    </div>
    <script>
       const routerView = document.getElementById('router-view');
        //定义一个跳转事件
        function linkTo(id) {
            console.log(id);
            if (id == 1) {
                history.pushState({ a: 1 }, 'name1', '/home')
                routerView.innerHTML = "<h1>这是首页</h1>"
            } else if (id == 2) {
                history.pushState({ a: 1 }, 'name2', '/about')
                routerView.innerHTML = "<h1>这是关于我们</h1>"
            }
        }
    </script>
</body>

摩羯座**

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hash与history的介绍

hash案例介绍<body> <div id="app"> <a href="#/home">首页</a> <a href="#/about">关于</a>  <div id="router-view"> </div> </div> <script
复制链接

扫一扫

专栏目录