Vue页面刷新,vue页面自动刷新
本文主要介绍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中页面刷新和部分刷新的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。