hashRouter and BrowserRouter
<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的更多相关文章
- react-router v4中 HashRouter 和 BrowserRouter的使用
遇到的问题 项目中控制路由跳转使用的是BrowserRouter,代码如下: ReactDOM.render(( <BrowserRouter> <div className=&qu ...
- HashRouter与BrowserRouter的异同
项目中控制路由跳转使用的是BrowserRouter 在开发过程中使用是没有问题的,但是将页面上传至服务器之后,问题就来了:用户访问的资源不存在,页面是空白的. 原因: 在browserHistory ...
- ReactRouter中HashRouter和BrowserRouter的区别
仅个人理解,如有不当请指正 一.从原理上 HashRouter在路径中包含了#,相当于HTML的锚点定位.(# 符号的英文叫hash,所以叫HashRouter,和散列没关系哦)) 而BrowserR ...
- react route使用HashRouter和BrowserRouter的区别-Content Security Policy img-src 404(Not found)
踩坑经历 昨天看了篇关于react-route的文章,说BrowserRouter比HashRouter好一些,react也是推荐使用BrowserRouter,毕竟自己在前端方面来说,就是个小白,别 ...
- react知识总结
用于构建用户界面的 JavaScript 库 JSX语法 style let style = { color: 'r'+'ed', fontSize: '30px' } let jsx = <d ...
- react 路由4 学习
表单控件 受控表单组件 非受控的表单组件 demo:收集表单提交的数据 路由(V4) 特点:一切皆是组件 官网:https://reacttraining.com/react-router/ npm ...
- React Router 4.0 基本使用
路由的概念,起初来源于服务端,就是当浏览器访问一个网站的不同页面时,服务端能够正确的返回页面的内容.当访问首页时,它能返回首页的内容,访问关于我们页面时,返回关于我们的内容.可以看到路由就是一种控制和 ...
- 23.react-router 路由
箭头函数扩展: 箭头函数: functoin 函数名(参数){ 函数体 } 箭头函数: 1.把function删掉 , 2.参数和{}之间加上 箭头=> 简写: 1.参数的简写:只有一个参 ...
- react router @4 和 vue路由 详解(二)react-router @4用法
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 2.react-router @4用法 a.大概目录 不需要像vue那样麻烦的 ...
随机推荐
- Notepad++安装Zen Codingt插件
Zen Coding介绍 Zen Coding是一套面向文本编辑器的插件,它允许通过IDE工具的联想功能(内容辅助)高速度的编辑HTML.XML.XSL和其他结构化的代码格式. Zen Coding由 ...
- Strings=newString(“xyz”);创建了几个 StringObject?
两个对象,一个是"xyx",一个是指向"xyx"的引用对象 s
- ssm科普篇
springMVC执行步骤: 1.用户发送请求到前端控制器,前端控制器根据请求信息来决定选择页面控制器,并将请求委托给它 2.页面控制器收到请求后,进行功能处理,首先需要收集和绑定请求参数到一个对象, ...
- IBM和DoE推出世界上最快的超级计算机
IBM和美国能源部的橡树岭国家实验室今天发布了该部门最新的超级计算机Summit.IBM声称峰会目前是世界上“最强大,最聪明的科学超级计算机”,其峰值性能每秒高达20万亿次.当新的榜单在本月晚些时候发 ...
- python的strip和split函数
这两个函数都是string的类函数 1.strip是去掉字符串头尾的特定字符,分三个 aa=' bb=aa.rstrip(') cc=aa.lstrip(') dd=aa.strip(') print ...
- JS中JSON.stringify()方法，将js对象（json串）转换成字符串，传入服务器
JSON 通常用于与服务端交换数据. 在向服务器发送数据时一般是字符串. 我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串. 语法 JSON.string ...
- SpringMvc中乱码问题的解决
一:如果是前台传递的数据有问题. 在tomcat的service.xml中加上: URIEncoding="UTF-8" <Connector URIEncoding=&qu ...
- webservice文件上传下载（byte[] 实现方式）
测试环境:axis2-1.6.1.6.0.20.jdk1.5 说明:本方式仅适用于文件小于10M的场景(否则会出现内存溢出),大文件的上传下载应另选其他方式. 1.创建要发布成webservice的j ...
- 洛谷 4099 [HEOI2013]SAO——树形DP
题目:https://www.luogu.org/problemnew/show/P4099 结果还是看了题解才会…… 关键是状态,f[ i ][ j ] 表示 i 子树. i 号点是第 j 个出现的 ...
- 集训队8月9日（组合计数+容斥原理+Mobius函数）
刷题数:4 今天看了组合计数+容斥原理+Mobius函数,算法竞赛进阶指南169~179页 组合计数 https://www.cnblogs.com/2462478392Lee/p/11328938. ...