Vue删除数据成功后如何刷新表格数据
作者:互联网
刷新表格数据的方法:
1、this.$router.go(0)
2、location.reload()
3、跳转空白页再跳回原页面
4、控制的显示隐藏(最实用的方法)
刷新表格数据的方法:
1、this.$router.go(0)
这种方法页面会一瞬间的白屏,体验不是很好,虽然只是一行代码的事
2、location.reload()
这种也是一样,画面一闪,效果总不是很好
3、跳转空白页再跳回原页面
在需要页面刷新的地方写上:this.$router.push(’/emptyPage’),跳转到一个空白页。在emptyPage.vue里beforeRouteEnter 钩子里控制页面跳转,从而达到刷新的效果
beforeRouteEnter (to, from, next) { next(vm => { vm.$router.replace(from.path) }) }
这种画面虽不会一闪,但是能看见路由快速变化
4、控制的显示隐藏(最实用的方法)
在App.vue中写如下代码
template> <div id="app"> <router-view v-if="isShow"></router-view> </div> </template> <script> export default { name: 'App', provide () { return { reload: this.reload } }, data () { return { isShow: true } }, methods: { reload () { this.isShow= false this.$nextTick(function () { this.isShow= true }) } } } </script>
然后在需要刷新的页面引入依赖:inject: [‘reload’],
在需要执行的地方直接调用方法即可:this.reload()
————————————————
版权声明:本文为CSDN博主「星空浩荡」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_45139342/article/details/107976362
标签:Vue,表格,刷新,空白页,reload,跳转,router,数据,页面 来源: https://www.cnblogs.com/Ao-min/p/14857645.html