业务场景:
vue项目中遇到对当前页面进行数据操作时需要实时更新数据,页面需要刷新;
在jquery里面可以使用location.reload()方法,刷新页面;
在vue中,使用this.$router.go(0)也能实现刷新,但是会出现短暂空白,用户体验效果不好,
所以可以尝试使用provide / inject 这对用例
这对选项需要一起使用,以允许一个根组件向其所有子组件注入一个依赖,实现原理就是通过控制router-view 的显示与隐藏,来重渲染路由区域,重而达到页面刷新的效果,show -> false -> show
实现如下:
- 1.根组件APP.vue代码如下,写入刷新方法,路由初始状态是显示的
<template> <div id="app"> <router-view v-if="active"></router-view> </div> </template> <script> export default { name: 'App', provide (){ return { reload:this.reload } }, data(){ return { active:true } }, methods:{ reload (){ this.active = false this.$nextTick(function(){ this.active = true }) } }, components:{ header } } </script>
- 2.然后在子组件里面进行引用
export default { name: "accredit", inject:"[reload]", data() { msg:"hello" } }
- 3.在执行完相应的操作后,调用reload方法即可
this.reload()