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. PlacementList must be sorted by first 8 bits of display_id 问题

    问题暂未解决 [37484:0811/103448.115:ERROR:display_layout.cc(551)] PlacementList must be sorted by first 8 ...

  2. live [lɪv , laɪv] 动词读lɪv 形容词读laɪv

    live [lɪv , laɪv] 动词读lɪv 形容词读laɪv live 英 [lɪv , laɪv] 美 [lɪv , laɪv] v. 居住;住;生存;(尤指在某时期)活着;(以某种方式)生活 ...

  3. 图片裁剪插件 vue-cropper [vue插件推荐]

    一个优雅的图片裁剪插件 https://www.npmjs.com/package/vue-cropper http://github.xyxiao.cn/vue-cropper/example/

  4. Navicat 15 最新破解版下载_永久激活注册码(附图文安装教程)

    Navicat 15 最新破解版下载_永久激活注册码(附图文安装教程) 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习 ...

  5. springboot实现post请求

    找了一堆,发现还是这个靠谱 package com.qishiyun.poplar.qlib.util; import cn.hutool.json.JSONUtil; import com.alib ...

  6. FreeRTOS教程9 软件定时器

    1.准备材料 正点原子stm32f407探索者开发板V2.4 STM32CubeMX软件(Version 6.10.0) Keil µVision5 IDE(MDK-Arm) 野火DAP仿真器 XCO ...

  7. 记录--【vue3】写hook三天，治好了我的组件封装强迫症。

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 我以前很喜欢封装组件,什么东西不喜欢别人的,总喜欢自己搞搞,这让人很有成就感,虽然是重复造轮子,但是能从无聊的crud业务中暂时解脱 ...

  8. Shell脚本关闭Nginx进程

    [root@testapp ~]# ps -ef | grep nginx root 25265 25216 0 09:22 pts/0 00:00:00 grep --color=auto ngin ...

  9. 实现基于TCP的服务端/客户端

    服务端套接字创建过程 第一步:调用socket函数创建套接字 //成功时返回文件表述符,失败时返回-1 int socket(int __domain, int __type, int __proto ...

  10. keycloak~网站对接到Keycloak的步骤

    新网站对接到KC的部署 kc的环境 向kc申请自己的客户端 kc的登录接口 通过code换token接口 刷新token接口 kc的用户信息接口 kc的jwt token说明 1. kc的环境 测试环 ...