本文主要介绍vue中页面刷新和部分刷新的相关信息。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。

目录

一、整页刷新二。部分刷新三。应用场景总结

一.全页面刷新

1.使用以下代码修改App.vue:

模板

div id=应用程序

路由器视图v-if=isRouterAlive /

/div

/模板

脚本

导出默认值{

名称：“应用程序”，

Provide() {//父组件返回要传递给子组件的数据。

返回{

重新加载：this.reload

}

},

data() {

返回{

isRouterAlive:真

}

},

方法：{

reload() {

this.isRouterAlive=false

这个。$nextTick(function() {

this.isRouterAlive=true

})

}

}

}

/脚本

如下关键图所示：

2.转到需要刷新的页面，使用inject导入引用重载：

3.在需要调用的方法中调用this.reload()。

二、局部刷新

1.定义一个变量isReloadData并将该变量绑定到需要刷新的标签:

2.定义本地刷新重载部件的方法：

3.调用需要执行本地刷新的方法。

三、应用场景

当页面中的某些数据被动态修改时，无论是道具带来的数据，还是通过函数动态设置的属性，修改后可能不会显示最新的数据。当页面数据发生变化，但是页面渲染会有bug，比如el-table组件中的数据发生变化后，会出现空白区域。

此时，整页刷新或部分刷新就派上用场了。下面的截图是我遇到的第二种情况的例子，已经用全页刷新和部分刷新解决了：

1.默认情况下选择“全部”,页面会正常呈现：

2.勾选显示列，页面正常呈现：

3.再次检查选中的显示列，将出现一个空白区域：

此时只需要调用单选方法中的局部刷新方法this.reloadPart()即可求解。同样，全选也是如此。

4.每次添加新的显示列时，表格中都会出现一个空白区域。这时我们只需要在新记录添加成功后，调用全页刷新this.reload()的方法。

总结

关于vue中页面刷新和部分刷新的文章到此结束。有关vue中页面刷新和部分刷新的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！