简单实现hash和history,了解面试题原理

最新推荐文章于 2024-05-30 11:27:58 发布

LF721

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量173

点赞数

文章标签： javascript 前端 hash 开发语言

本文链接：https://blog.csdn.net/LF721/article/details/124374593

版权

hash

最开始是做锚点,实现上下跳转,特点是改变url不会刷新页面,通过window.location.hash进行路由的跳转,通过hashchange监听路由的变化,如果哈希值与组件路由的path,相等,就进行组件的写入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ui>
    <li data-url="/aa">aaa</li>
    <li data-url="/bb">bbb</li>
    <li data-url="/cc">vvv</li>
  </ui>
  <div>我是内容:</div>
  <h1>q</h1>
</body>
<!-- hash -->

  <script>
  let routeDate=[{path:'/aa',pathData:'我是a'},{path:'/bb',pathData:'我是b'},{path:'/cc',pathData:'我是v'}]
  let path
  for(let i = 0;i<routeDate.length;i++){
   document.querySelectorAll('li')[i].onclick=function(){
     console.log(this.getAttribute('data-url'));
     path=this.getAttribute('data-url')
     window.location.hash=path
  }
}
  window.onhashchange=function(){
    routeDate.map(item=>{
      if(item.path==path){
        document.querySelector('div').innerHTML=item.pathData
      }
    })
  }
</script>
</html>

history

pushstate(state,title,url)有三个参数,添加到历史记录
state,可以在popstate事件触发时,以回调的方式,传入数据
title,新页面的标题,浏览器都忽略
url,新的地址
前进后退需要通过popstate,去实现跳转(history.go原理)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ui>
    <li data-url="/aa">aaa</li>
    <li data-url="/bb">bbb</li>
    <li data-url="/cc">vvv</li>
  </ui>
  <div>我是内容:</div>
  <h1>q</h1>
</body>
<!-- hash -->
<script>
  
   let routeDate=[{path:'/aa',pathData:'我是a'},{path:'/bb',pathData:'我是b'},{path:'/cc',pathData:'我是v'}]
   let path
   
   for(let i = 0;i<routeDate.length;i++){
    document.querySelectorAll('li')[i].onclick=function(){
      path=this.getAttribute('data-url')
      history.pushState(null,null,path)
      changeText(path)
    }
   };
   let changeText=function(path){
    routeDate.map(item=>{
      if(item.path==path){
        document.querySelector('div').innerHTML=item.pathData
      }
    })
  }
  window.onpopstate=function(){
    changeText(location.hash)
  }
</script>
</html>

LF721

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单实现hash和history,了解面试题原理

hash最开始是做锚点,实现上下跳转,特点是改变url不会刷新页面,通过window.location.hash进行路由的跳转,通过hashchange监听路由的变化,如果哈希值与组件路由的path,相等,就进行组件的写入<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=".
复制链接

扫一扫