Vue项目整体刷新的方法

1.场景

在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

2.遇到的问题

1. 用vue-router重新路由到当前页面,页面是不进行刷新的

2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好

 

1.利用中央事件总线实现项目整体刷新

userManger.vue页面发射事件

Vue项目整体刷新的方法

App.vue接收事件,实现页面刷新

Vue项目整体刷新的方法

 

 

2.利用provide / inject 组合实现项目整体刷新

作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

App.vue:

声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载

Vue项目整体刷新的方法

userManger.vue:

当用户一键登录时,即可刷新当前页面。

Vue项目整体刷新的方法

 

Vue项目整体刷新的方法