js 刷新当前页面的方法 reload() , replace()的简单使用

article/2025/9/29 22:48:34

本文为大家介绍三种 js 刷新当前页面的方法，我是在vue实例下写的：

添加定时器是为了直观看到刷新效果（每次刷新都会重置为0）；

reload() 方法;

replace() 方法;

页面自动刷新;

reload() 方法

reload()方法用于刷新当前文档。

reload() 方法类似于你浏览器上的刷新页面按钮。

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onload()</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head>
<body><div id="demo"><h1>{{number}}</h1><button @click='reloadPage()'>重新加载页面</button></div>
</body>
<script>var demo = new Vue({el: '#demo',data: {number: 0},created() {this.add();},methods: {// 为了让刷新更直观，定时器的时间是随机的（80-380）： Math.floor(Math.random() * 300 + 80)add() {var that = this;var timer = setInterval(function () {that.number++}, Math.floor(Math.random() * 300 + 80))},reloadPage() {location.reload()}}})</script>
</html>

效果：（每次点击，都会刷新页面重新计数）

replace()方法

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>replace()</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="demo"><h1>初始页面</h1><button @click='replaceDoc()'>重新加载页面</button></div>
</body>
<script>  var demo = new Vue({el:'#demo', data:{ number:0},created(){},methods: {replaceDoc(){window.location.replace("https://www.csdn.net/")// window.location.href="https://www.csdn.net/"
}}})
</script>
</html>

效果：

在这里可能会有疑惑，这不就是页面跳转吗？
当我把上面代码中的：

window.location.replace("https://www.csdn.net/")

更改为：

window.location.href="https://www.csdn.net/"

那确实就是页面跳转了， replace()就是刷新，只是重定向到指定的页面了，嗯，我知道还不够有说服力,,,

location.href 通常被用来跳转到指定页面地址,强调跳转，会留下新的历史记录，可以通过“前进”和“后退”来切换URL；

location.replace方法可以实现用新的文档替换当前文档，强调替换在历史记录中，强迫浏览器将指定的URL替换掉缓存在历史记录中的URL，通俗来说一直是这一项历史记录，并不会增加新的，也就不能通过“前进”和“后退”来切换URL了。一定遇到过，“页面超时过期”这样的情况吧，一般就用location.replace方法，这样更像是客户端F5刷新界面，当页面的method="post"的时候，也就是向服务器传送数据的时候，出现“网页过期”提示，这是Session的安全保护机制。

页面自动刷新

自动刷新比较简单只需要在head标签中添加一个meta标签：content属性设置自动刷新时间间隔。

<meta http-equiv="refresh" content="3">

完整代码：

<!DOCTYPE html>
<html lang="en">
<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"><meta http-equiv="refresh" content="3"><title>自动刷新</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="demo"><h1>{{number}}</h1></div><script type="text/javascript" > var demo = new Vue({el:'#demo', data:{ number:0},created(){this.add();},methods:{add(){var that = this;var timer=setInterval(function () {that.number++}, Math.floor (Math.random()*300+80))}}})</script>
</body>
</html>

效果：（每隔3秒，都会刷新页面重新计数）