1.hahs

<!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>Hash模式</title>

  </head>

  <body>

    <a href="#/home">home</a>

    <a href="#/about">about</a>

    <div id="content">default</div>

    <script>

      window.addEventListener('hashchange', () => {

        const content = document.getElementById('content')

        // 路径匹配显示

        window.location.hash === '#/home'

          ? (content.innerHTML = 'home')

          : (content.innerHTML = 'about')

      })

    </script>

  </body>

</html>

2.history

<!--

 * @Description:  需要在在服务器访问(可以使用anywhere建立一个文件服务器,或者vscode插件Live Server),否则无效

-->

<!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>history</title>

  </head>

  <body>

    <a href="/home">home</a>

    <a href="/about">about</a>

    <button onclick="test()">test</button>

    <button onclick="back()">back</button>

    <div id="content">default</div>

    <script>

      function back() {

        history.back()

      }

      function test(e) {

        console.log(' ssss')

        window.history.pushState({}, 'title', '/test')

      }

      const content = document.getElementById('content')

      const aEls = document.getElementsByTagName('a')

      ;[...aEls].forEach(item => {

        item.addEventListener('click', e => {

          // 阻止默认跳转时间

          e.preventDefault()

          const href = item.getAttribute('href')

          // 修改url

          history.pushState({}, '', href)

          // 修改显示内容

          content.innerHTML = href

        })

      })

      window.onpopstate = () => {

        // 会导致循环 back => pop => back => pop

        // history.back()

        console.log('hist', history)

        content.innerHTML = 'back'

      }

      let oldPushState = window.history.pushState

      window.history.pushState = function (state, title, path) {

        oldPushState.call(history, state, title, path)

        window.onpushstate && window.onpushstate(state, title, path)

      }

      window.onpushstate = window.onpopstate = function (state, title, path) {

        // back 的时候依然需要根据路径进行对应的渲染处理

        content.innerHTML = location.pathname

      }

    </script>

  </body>

</html>

框架hash/history实现简单原理的更多相关文章

  1. Spring框架系列(2) - Spring简单例子引入Spring要点

    上文中我们简单介绍了Spring和Spring Framework的组件,那么这些Spring Framework组件是如何配合工作的呢?本文主要承接上文,向你展示Spring Framework组件 ...

  2. Spring框架系列(13) - SpringMVC实现原理之DispatcherServlet的初始化过程

    前文我们有了IOC的源码基础以及SpringMVC的基础,我们便可以进一步深入理解SpringMVC主要实现原理,包含DispatcherServlet的初始化过程和DispatcherServlet ...

  3. Spring框架系列(14) - SpringMVC实现原理之DispatcherServlet处理请求的过程

    前文我们有了IOC的源码基础以及SpringMVC的基础,我们便可以进一步深入理解SpringMVC主要实现原理,包含DispatcherServlet的初始化过程和DispatcherServlet ...

  4. java中异常处理机制的简单原理

    以上是自认为的java异常处理的简单原理,如有不妥之处还请各位大神帮忙指点,谢谢!

  5. Spring框架-IOC和AOP简单总结

    参考博客: https://blog.csdn.net/qq_22583741/article/details/79589910 1.Spring框架是什么,为什么,怎么用 1.1 Spring框架是 ...

  6. [转帖]linux 清空history以及记录原理

    linux 清空history以及记录原理 自己的linux 里面总是一堆 乱七八槽输错的命令 用这个办法 可以清空 linux的内容. 清爽一些. 1.当前session执行的命令,放置缓存中,执行 ...

  7. 研究一下Spark Hash Shuffle 和 SortShuffle 原理机制

    研究一下Spark Hash Shuffle 和 SortShuffle 原理机制研究一下Spark Hash Shuffle 和 SortShuffle 原理机制研究一下Spark Hash Shu ...

  8. java——关于异常处理机制的简单原理和应用

    异常处理机制的简单原理和应用 一.Execption可以分为java标准定义的异常和程序员自定义异常2种 (1)一种是当程序违反了java语规则的时候,JAVA虚拟机就会将发生的错误表示为一个异常.这 ...

  9. MUI框架-05-用MUI做一个简单App

    MUI框架-05-用MUI做一个简单App MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有 ...

  10. jQuery框架开发一个最简单的幻灯效果

    在线演示 在这个课程中,我们将介绍如何使用jQuery来开发一个最简单的图片幻灯效果. 立刻观看互动课程:jQuery框架开发一个最简单的幻灯效果 阅读原文:jQuery框架开发一个最简单的幻灯效果

随机推荐

  1. RabbitMq 在centos中开机自启动

    1.在/etc/init.d 目录下新建一个 rabbitmq [root@localhost init.d]# vi rabbitmq 文件内容 #!/bin/bash #chkconfig:234 ...

  2. 【mac】Alfred 无法调用Terminal

    原因:是从mac app商店安装的Alfred class 解决方案:建议从官网下载安装:https://www.alfredapp.com/ 参考:https://www.alfredforum.c ...

  3. 解决Windows下json.hpp中文乱码问题

    文中使用的是 json 库,整个库的代码由一个单独的头文件json.hpp组成,用普通的C++11编写的.它没有库,没有子项目,没有依赖关系,没有复杂的构建系统,使用起来很方便. 先引用头文件和命名空 ...

  4. python数组概念和实例解析

    一 概念 如果我们需要一个只包含数字的列表,那么array.array比list更高效.数组支持所有跟可变序列有关的操作,包括.pop,.insert和.extend. 另外,数组还提供从文件读取和存 ...

  5. 双声道音频16bit量化16KHz采样率共多少个bit

    Hz(赫兹)是频率单位,其含义是每秒钟的次数.kHz中的k是千的意思,所以kHz就是千赫兹,所以16kHz就是16000Hz,意思就是每秒钟采样16000次.bit(比特)称为"位" ...

  6. Android7.0以上的分享图片文件错误及解决方法

    原文地址: Android7.0以上的分享图片文件错误及解决方法 - Stars-One的杂货小窝 在Android7.0以上版本,分享图片文件出现了exposed beyond app throug ...

  7. 建民的Java小课堂

    Java Java快问快答: 1.JAVA的基本运行单位是类还是方法? 很明显是类 2.类由什么组成? 由特性和行为的对象组成 3.变量的类型,相互之间可以转换吗,浮点数? 答案是可以 int i=9 ...

  8. 3DCAT亮相WAIC 2022浦东分会场——元宇宙博览会暨数字光影大会

    以"智联世界 元生无界"为主题的2022世界人工智能大会于9月3日下午圆满闭幕.与此同时,由上海市多媒体行业协会.深圳市数字创意与多媒体行业协会主办,上海天盛会展有限公司承办的WA ...

  9. django(web框架推导、简介、数据库初识）

    一 web框架推导 1 软件开发架构 cs架构bs架构bs本质是也是cs # HTTP协议:无状态,无连接,基于请求,基于tcp/ip的应用层协议 # mysql:c/s架构,底层基于soket,自己 ...

  10. c# WPF制作百度网盘资源搜索工具

    界面如下 1.搜索中 2.搜索成功 源码地址:https://github.com/BruceQiu1996/BaiduDiskSearcher 希望有用的学到的或者对此感兴趣的可以给一个star,谢 ...