项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面。本文为大家整理了三种不同的实现方法,需要的可以参考一下
背景
项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面.
思路
(1)如果页面简单,调用接口刷新数据即可.
(2)如果页面复杂,需要调用多个接口或者通知多个子组件做刷新,可以采用刷新当前页面的方式 下面整理了3种方式来实现刷新当前页面,每种方式的思路不同,各有优缺点
实现
方式1-通过location.reload和$router.go(0)方法
(a)概述
通过location.reload
和$router.go(0)
都可以实现页面刷新,它利用浏览器刷新功能,相当于按下了f5
键刷新页面
优点:足够简单
确定:会出现页面空白,用户体验不好
(b)代码
Document
(c)预览
方式2-通过空白页面
(a)概述
通过$router.replace
方法,跳转一个空白页面,然后再调回之前页面,它利用vue-router
切换页面会把页面销毁并新建新页面的特性
优点:不会出现页面空白,用户体验好
缺点:地址栏会出现快速切换的过程
(b)代码
Document
(c)预览
方式3-通过provide和inject
(a)概述
通过在父页面的
上添加v-if的控制
来销毁和重新创建页面的方式刷新页面,并且用到provide
和inject
实现多层级组件通信方式,父页面通过provide
提供reload
方法,子页面通过inject
获取reload
方法,调用方法做刷新
优点:不会出现页面空白,地址栏会不会出现快速切换的过程,用户体验好
缺点:实现稍复杂,涉及到provide
和inject
多层级组件间的通信,和v-if
控制组件创建和销毁,和$nextTick
事件循环的应用
(b)代码
Document
(c)预览
以上就是Vue实现刷新当前页面的三种方式总结的详细内容,更多关于Vue刷新当前页面的资料请关注0133技术站其它相关文章!
以上就是Vue实现刷新当前页面的三种方式总结的详细内容,更多请关注0133技术站其它相关文章!