<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. 135-基于TMS320C6678、FPGA XC5VSX95T的2路Full模式Camera Link输入双目视觉处理平台

    基于TMS320C6678.FPGA XC5VSX95T的2路Full模式Camera Link输入双目视觉处理平台 一.板卡概述 本板卡由我公司自主研发,基于CPCI架构,符合CPCI2.0标准,采 ...

  2. 阿里云centos下搭建vsftpd，被动模式出现的问题

    最近计网课设要做一个ftp服务端,所以先在自己服务器搭一个来了解一下. 首先在默认情况下连接,227 Entering Passive Mode (192,168,*,*,227,175). 显示连接 ...

  3. U盘装CENTOS操作系统

    一.制作U盘系统镜像 1).用UltralISO软件打开下载好的ISO文件镜像,“文件”-“打开”,选中下载好的ISO镜像 2)点击“启动”-“写入硬盘镜像”,选中需要写入的U盘(容量最少为8G),点 ...

  4. numpy知识点总结

    一.数组方法 创建数组:arange()创建一维数组:array()创建一维或多维数组,其参数是类似于数组的对象,如列表等 反过来转换则可以使用numpy.ndarray.tolist()函数,如a. ...

  5. procixx 时钟的坑

    error 1.procixx设置800M,uboot中是720M 了解到整个过程是,当procixx配置后,通过FSBL中的ps_init.c反应出来 // ARM_PLL_FDIV = 48    ...

  6. springcloud整合分布式事务LCN

    一.创建eureka注册中心 a.pom文件 <properties> <java.version>1.8</java.version> <spring-cl ...

  7. pycharm 中切换terminal的盘符

    第一步,采用 cd .. 将当前路径设置为该盘符的根目录 第二步,采用 C: 将盘符设置为C盘然后使用 cd 命令将路径切换到指定位置

  8. CentOS7 安装xen(在虚拟机上成功,实体机测试死机!)

    此文章只做操作记录,其中有些地方可能漏了!!我只贴出自己的操作过程!其它有差别的地方请自己网上查找参考! 只有在全虚拟化下才能安装Windows,这就需要有硬件支持,并在BIOS中开启Virtuali ...

  9. Linux复制命令cp进阶

    cp -a:连同属性和权限也一起复制 cp -i:如果不带该参数,默认覆盖同名文件而不会提醒. cp -u:只拷贝符合以下条件的文件到目标目录:目标目录中不存在的文件或目标目录中文件版本较旧的文件. ...

  10. django model的get和filter方法的区别

    django的get方法: 1django的get方法是从数据库的取得一个匹配的结果,返回一个对象,如果记录不存在的话,它会报错. 2如果你用django的get去取得关联表的数据的话,而关键表的数据 ...