第
vue项目刷新当前页面的三种方式(重载当前页面数据)
目录vue项目刷新当前页面的三种方式(重载当前页面数据)一、this.$router.go(0)二、location.reload()三、用provide/inject组合PS:vue项目刷新当前页面的三种方法
vue项目刷新当前页面的三种方式(重载当前页面数据)
一、this.$router.go(0)
相当于F5刷新,这种方法虽然代码很少,只有一行,但是体验很差。页面会一瞬间的白屏,体验不是很好
二、location.reload()
这种也是一样,画面一闪,体验不是很好,相当于页面刷新
推荐解决方法:
三、用provide/inject组合
原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效
在App.vue,声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载。
template
divid=app
router-viewv-if=isRouterAlive/router-view
/div
/template
script
exportdefault{
name:App,
provide(){
return{
reload:this.reload
data(){
return{
isRouterAlive:true
methods:{
reload(){
this.isRouterAlive=false
this.$nextTick(function(){
this.isRouterAlive=true
/script
在需要用到刷新的页面。在页面注入App.vue组件提供(provide)的reload依赖,在逻辑完成之后(删除或添加),直接this.reload()调用,即可刷新当前页面。
注入reload方法
exportdefault{
inject:[reload],
}
在需要重载的地方直接调用
this.reload()
PS:vue项目刷新当前页面的三种方法
1、最直接整个页面重新刷新。
location.reload();
this.$router.go(0);
//这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好。
2、新建一个空白页面,点击确定的时候先跳转到这个空白页,然后再立马跳转回来。这个方式,相比第一种不会出现一瞬间的空白页,只是地址栏有个快速的切换的过程,也可采用。
3、provide/inject刷新相对比较理想。
//首先在app.vue进行修改
template
divid=app
//控制router-view的显示或隐藏,从而控制页面的再次加载
router-viewv-if=isRouterAlive/
/div
/template
script
exportdefault{
name:App,
provide(){
return{
reload:this.reload,
data(){
return{
isRouterAlive:true,
created(){},
methods:{
//通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载
reload(){
this.isRouterAlive=false;
this.$nextTick(()={
this.isRouterAlive=true;
/script
在需要刷新的页面引入后直接调用即可
template
div
el-buttonicon=el-icon-refresh@click=refresh点击刷新/el-button
/div
/template
script
exportdefault{
//引用vuereload方法
inject:[reload],
name:,
data(){
return{