前言
提示:本文记录刷新当前页面常见的几种方式,其他的等我熟练运用掌握了再来添加~
提示:以下是本篇文章正文内容,下面案例可供参考
一、使用步骤
1.this.$router.go(0)
代码如下(示例):
// 按钮触发事件
<button @click="refresh">刷新当前页面一</button>
// 方法
methods: {
refresh() {
this.$router.go(0);
}
}
2.location.reload()
代码如下(示例):
// 按钮触发事件
<button @click="refresh">刷新当前页面二</button>
// 方法
methods: {
refresh() {
location.reload();
}
}
3.window.location.assign(“路径”)
代码如下(示例):
// 按钮触发事件
<button @click="refresh">刷新当前页面三</button>
// 方法
methods: {
refresh() {
// window.location.href代表当前页面路径
window.location.assign(window.location.href);
// 当然也可以换成自己所需的路径,比如:
window.location.assign(`https://www.xxxxx.com/`);
}
}
二、总结
- 前两种方式( this.$router.go(0) 和 location.reload() ):
*相当于按F5那样的刷新,一般我们可以看到在刷新页面也就是页面加载时,可能会出现一瞬间空白的页面。 - 第三种方式( window.location.assign() ):
*如果我们是在页面最底部刷新,用前两种方式刷新后的页面,依旧保持在最后浏览的那个位置。
*而用window.location.assign()进行刷新的话,刷新后的页面都会从页面顶部开始展示。
*第三种方式相当于a标签中的href属性,a标签跳转当前页面,哪怕是在页面底部触发,刷新后也会回到页面顶部。