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那样麻烦的 ...
随机推荐
- C++使用函数strcpy出现bug: 错误 C4996 'strcpy': This function or variable
C++中使用函数strcpy时出现问题: 解决方案: 在文件开头添加语句: #pragma warning(disable:4996) done! 剑指offer: 第一题:赋值运算符函数 #incl ...
- 一、Spring Boot系列：通过Maven创建第一个项目
1.打开idea选择创建工程 2.创建maven工程,同时选择jdk1.8 注意:不需要勾选其他选项 3.填写项目名称 4.创建好maven项目后,在pom.xml文件中导入Spring Boot需要 ...
- Winfrom 弹出窗体位置设定
Winfrom 窗体弹出位置设定,其实就是两种模式,第一种模式是通过Winform提供的属性来设定:第二种模式是自定义,可以相对于软件本身,也可以是相对于屏幕. 一.第一种模式 使用Winform提供 ...
- Jmeter --Json Extractor （后置处理器）
一.使用场景 Json Extractor 后置处理器用在返回格式为json的HTTP请求中, 用来获取返回的json中的某个值.并保存成变量供后面的请求进行调用或者断言等. 二.使用方法 1.创建H ...
- toj 4602 松鼠聚会
题目: 草原上住着一群小松鼠,每个小松鼠都有一个家.时间长了,大家觉得应该聚一聚.但是草原非常大,松鼠们都很头疼应该在谁家聚会才最合理. 每个小松鼠的家可以用一个点x,y表示,两个点的距离定义为:点( ...
- HTTP协议-Cookie和Session详解
前言: 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的跟踪技术就是Cookie和Session. Cookie通过在客户端记录信息确定用户身份,Session通过在 ...
- mobx学习笔记03——mobx基础语法（decorator修饰器）
在声明阶段实现类与类成员注解的一种语法. function log(target){ const desc = Object.getOwnPropertyDescriotors(target.prot ...
- Thymeleaf入门到吃灰
Thymeleaf 官网部分翻译:反正就是各种好 Thymeleaf是用来开发Web和独立环境项目的服务器端的Java模版引擎 Spring官方支持的服务的渲染模板中,并不包含jsp.而是Thymel ...
- [20190727NOIP模拟测试9]单(single) 题解(树上dp)
啊啊啊啊啊啊啊啊考场上差一点就A掉了5555 千里之堤溃于蚁穴……鬼知道最后一步那么显然的柿子我为什么没考虑用上…… 观察数据范围可知,出题人期望我们想出一个$O(n)$的做法 当然也有可能是$O(n ...
- html常用代码
<marquee width="70%" scrollamount="2">大家好</marquee> // 大家好 字符从左到右 ...