<html>
<body>

<div>
<button class="btn" onclick="btnFun();">点击新增一条历史记录</button>
</div>
<script>
var num=0;
console.log('增加历史记录前 state的值：',history.state,navigator,history,screen,location,document); // null
function btnFun() {//点击事件
// 增加一个历史记录
history.pushState(`我是记录num:${num}`,null,'html5.html?b=1');
num++;
console.log('增加历史记录后 state的值：',history.state); // a
};
window.addEventListener('popstate',function() {
var state = history.state;//取出state值
//注意：在此处时（点击后退按钮时），state的值已经为null
// （因为返回时历史记录会被删除，浏览器动作）
console.log('点击后退按钮后 state的值：',navigator,history,screen,location,document); // null
//判断，想要执行的操作

});
</script>

<a href="#/home">home</a>
<a href="#/index">index</a>
<a href="#/other">other</a>
<div id="box"></div>
<script>
window.onhashchange = function(){
var hash = window.location.hash.slice(1)
var box = document.getElementById('box')
if(hash=='/home'){
box.innerHTML = "home"
}else if(hash=='/index'){
box.innerHTML = "index"
}else{
box.innerHTML = "default"
}
}
</script>

</body>
</html>

hashRouter and BrowserRouter的更多相关文章

  1. react-router v4中 HashRouter 和 BrowserRouter的使用

    遇到的问题 项目中控制路由跳转使用的是BrowserRouter,代码如下: ReactDOM.render(( <BrowserRouter> <div className=&qu ...

  2. HashRouter与BrowserRouter的异同

    项目中控制路由跳转使用的是BrowserRouter 在开发过程中使用是没有问题的,但是将页面上传至服务器之后,问题就来了:用户访问的资源不存在,页面是空白的. 原因: 在browserHistory ...

  3. ReactRouter中HashRouter和BrowserRouter的区别

    仅个人理解,如有不当请指正 一.从原理上 HashRouter在路径中包含了#,相当于HTML的锚点定位.(# 符号的英文叫hash,所以叫HashRouter,和散列没关系哦)) 而BrowserR ...

  4. react route使用HashRouter和BrowserRouter的区别-Content Security Policy img-src 404(Not found)

    踩坑经历 昨天看了篇关于react-route的文章,说BrowserRouter比HashRouter好一些,react也是推荐使用BrowserRouter,毕竟自己在前端方面来说,就是个小白,别 ...

  5. react知识总结

    用于构建用户界面的 JavaScript 库 JSX语法 style let style = { color: 'r'+'ed', fontSize: '30px' } let jsx = <d ...

  6. react 路由4 学习

    表单控件 受控表单组件 非受控的表单组件 demo:收集表单提交的数据 路由(V4) 特点:一切皆是组件 官网:https://reacttraining.com/react-router/ npm ...

  7. React Router 4.0 基本使用

    路由的概念,起初来源于服务端,就是当浏览器访问一个网站的不同页面时,服务端能够正确的返回页面的内容.当访问首页时,它能返回首页的内容,访问关于我们页面时,返回关于我们的内容.可以看到路由就是一种控制和 ...

  8. 23.react-router 路由

    箭头函数扩展: 箭头函数: functoin 函数名(参数){    函数体 } 箭头函数: 1.把function删掉 , 2.参数和{}之间加上 箭头=> 简写: 1.参数的简写:只有一个参 ...

  9. react router @4 和 vue路由 详解(二)react-router @4用法

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 2.react-router @4用法 a.大概目录      不需要像vue那样麻烦的 ...

随机推荐

  1. 【串线篇】SQL映射文件-resultMap自定义封装

    mybatis默认封装规则: 1).按照列明和属性名一一对应的规则(不区分大小写) 2).如果不一一对应: 1).开启驼峰命名(数据库aaa_bbb, 程序中aaaBbb) 2).起别名 3).自定义 ...

  2. 洛谷4721 【模板】分治 FFT

    传送门 久违的多项式全家桶= =+ 分治NTT 用的就是cdq分治的思想 对于当前递归到的区间[l,r] 我们处理出[l,mid]对[mid+1,r]答案的贡献 然后分治递归求解就可以啦qwq 这个贡 ...

  3. C# json对象中包含数组对象时，如何存入数据库

    前端创建的的对象例如: C#端这样将数组提取出来存入

  4. moment.js时间格式化库

    网址:momentjs.cn 主要用来操作时间的格式化.通过发送API请求获取到的数据中:例如[新闻]中的 发布时间,有的时候.请求到的时间,后台没处理过,那么只能前端来操作数据了. moment.j ...

  5. Struts和Hibernate的jar包

    这几天做了一个javaee关于struts框架和Hibernate框架的实践,实践内容倒是没什么,关键是找框架的配置花了许多时间 于是在这里把这两个框架的有关jar上传分享一下 链接: https:/ ...

  6. ubuntu下安装pyaudio

    首先安装依赖库,不安装依赖库会安装失败: sudo apt-get install libasound-dev portaudio19-dev libportaudio2 libportaudiocp ...

  7. 每天一个linux命令：tail(16)

    tail tail命令用于输入文件中的尾部内容,不指定文件时,作为输入信息进行处理.tail命令默认在屏幕上显示指定文件的末尾10行.命令从指定点开始将文件写到标准输出,使用tail命令的-f选项可以 ...

  8. python3下tomorow模块报语法错误def async(n, base_type, timeout=None): ^ SyntaxError: invalid syntax

    python3 pip 安装tomorrow模块,调用时候会报错:def async(n, base_type, timeout=None): ^ SyntaxError: invalid synta ...

  9. 全面质量管理体系运转的基本方法 PDCA

    PDCA管理循环 PDCA循环作为全面质量管理体系运转的基本方法,其实是需要搜集大量数据资料,并综合运用各种管理技术和方法.全面质量管理活动的全部过程,就是质量计划的制订和组织实现的过程,这个过程就是 ...

  10. BUUCTF | [SUCTF 2019]CheckIn

    感觉这题师傅们已经写得很详细了,我就做一个思路梳理吧,顺道学一波.user.ini 步骤: 1.上传一个“.user.ini”文件 2.上传自己的马“a.jpg” 3.菜刀连接 "http: ...