Vue.js刷新当前页面
Vue.js的路由跳转很强大,类似ajax的局部刷新,路由跳转时候页面是不刷新的,刷新当前页面的功能不建议用,但是有的时候确实需要刷新当前页面来实现某些需求,这个时候,我们有三 种方法可以实现。
第一种就是传统的的方法
window.location.reload();
第二种是通过vue.js的路由来实现
this.$router.go(0)
<template>
<section>
<h1 ref="hello">{{ value }}</h1>
<el-button type="danger" @click="get">点击</el-button>
</section>
</template>
<script>
export default {
data() {
return {
value: 'Hello World ~'
};
},
methods: {
get() {
this.$router.go(0);
// window.location.reload();
}
},
mounted() {
},
created() {
}
}
</script>
第三种是使用浏览器自带的刷新功能,window.history.go(0),这里的window可以省略不写
history.go(0);
<template>
<section class="p-10">
<el-button type="danger" @click="back">返回</el-button>
</section>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
back() {
history.go(0);
}
}
};
</script>
既然使用vue来做前端了,那么这里就推荐使用第二种方式吧~
嗯,就酱~~
Vue.js刷新当前页面的更多相关文章
- Vue. 之 刷新当前页面,重载页面数据
Vue. 之 刷新当前页面,重载页面数据 如下截图,点击左侧不同的数据,右侧根据左侧的KEY动态加载数据.由于右侧是同一个页面,在进行路由跳转后,不会再次刷新数据. 解决方案: 右侧的页面中 scri ...
- vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失
第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...
- vue项目刷新当前页面
场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...
- (转)vue项目刷新当前页面
场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...
- js 刷新父页面
//刷新父页面 window.opener.location.reload();
- vue.js在html页面中的使用
1.加载vue.js,然后 var app = new Vue({ //vue代码})2.截图如下:
- Vue.js如何在一个页面调用另一个同级页面的方法
使用场景: 页面分为header.home.footer三部分,需要在home中调用header中的方法,这两个没有相互引入 官方给出方法: 需要在展示页里调用顶部导航栏页里的方法,两者之间没有引用关 ...
- js 刷新当前页面会弹出提示框怎样将这个提示框去掉
//禁止刷新提示window.onbeforeunload = function() { var n = window.event.screenX - window.screenLeft; var b ...
- js刷新当前页面
a href="javascript:window.location.href=location.href"
随机推荐
- 【CODEFORCES】 C. Table Decorations
C. Table Decorations time limit per test 1 second memory limit per test 256 megabytes input standard ...
- es迁移索引数据合并
es集群迁移,大规模迁移过程中,比如我们以当天时间做索引,在新的es集群会存在和老的es集群一样的索引文件名,这个时候用snapshot恢复数据会出现冲突问题.这里我们可以用reindex api来解 ...
- Codeforces Round #297 (Div. 2) 525C Ilya and Sticks(脑洞)
C. Ilya and Sticks time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- html5在移动端的屏幕适应性问题
html5在移动端的屏幕适应性问题 Html5 以前是最最炙手可热的技术.移动端也由于html5技术的增加变得更加变通一些.人人都喜欢"Write once.run more",但 ...
- 一些I2S的基础概念
在数字音频Datasheet中,我们经常看到256FS,384FS,32kHz,44.1kHz MCLK等概念.一般在数字音频芯片用3个pin作为通讯接口:BCLK,ADCLRC,DOUT.现在做个总 ...
- hdu 1829 &poj 2492 A Bug's Life(推断二分图、带权并查集)
A Bug's Life Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) To ...
- 初识Quartz(三)
本文将介绍CronTrigger的使用方法,CronTrigger相比 SimpleTrigger可以支持更复杂的作业计划.cron这一观念来自UNIX,在UNIX中,cron是一个运行于后台的守护程 ...
- linux ls命令按时间显示文件
本文介绍下,使用ls命令显示文件,并按时间排序的方法,供大家学习参考. 在linux系统中,使用ls命令按时间排序文件,其实很简单,如下: #ls -tr 即可按时间排序当前目录下的文件. 附,l ...
- 如何解决局域网中Windows防火墙不能访问Oracle问题!
在防火墙例外中,添加端口1521端口就样局域网内的其他机器就可以访问你的ORACLE了. 在防火墙的入站规则中,新建端口规则.过程如下例图片所示:
- 不再为无限级树结构烦恼,且看此篇s
很久都没有写点什么出来分享了,最近在做多级树的时候,发现来来回回写过很多遍,于是封装成用户控件,以方便日后重复使用. 首先上效果: 我们看到以上2种效果,都是支持任意级的,这里源码中使用的是递归,以便 ...