history对象

triumph

triumph

Bom对象

history对象

1.更改URL

方法说明
assign()载入一个新文档
reload()绕过缓存载入当前的文档
replace()替换当前文档
<!DOCTYPE html>
<html lang="zh-CN">
<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>location对象</title>
</head>
<body>
<input type="button" value="载入新文档" onclick="newPage()"></input>
<input type="button" value="刷新页面" onclick="refreshPage()"></input>
<input type="button" value="替换当前内容" onclick="replacePage()"></input>
<div id="time"></div>
</body>
</html>
<script>
/* 获取并显示当前载入时间*/
const obDate = new Date(),
nowDate = obDate.getDate();
const nowTime = obDate.toLocaleTimeString();
document.getElementById('time').innerHTML = nowTime;
/**
* 载入新文档
*/
function newPage() {
window.location.assign("http://127.0.0.1:5500/index.htm");
}
/**
* 绕过缓存刷新页面
*/
function freshPage() {
location.reload(true); //“(forcedReload: boolean): void”已被弃用ts(6385)
/*Location.reload() 该方法只有一个参数,当变化true时,将强制浏览器从服务器加载页面资源,当变为或未false传参时,浏览器则可能从缓存中读取页面。
该方法在跨域调用(执行该方法的脚本文件的域和Location对象位于页面的跨不同)时,将会引发 DOMException异常。*/
}
/**
* 替换当前页内容
*/
function replacePage() {
location.replace("https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes");
}
</script>

2.获取url参数

location属性名 的方式,即可获取当前用户访问url的指定部分。 通过location属性名 = 值 的方式可以改变当前加载的页面。

属性说明
hash返回一个url锚部分
host返回一个url的主机名和端口
hostname返回url的主机名
href返回完整的url
pathname返回url路径名
prot返回url服务器使用的端口号
protocol返回一个url协议