脚本宝典收集整理的这篇文章主要介绍了如何实现vue中不跳转不闪动页面刷新?provide /inject 完美解决方案,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在vue的项目中刷新功能你会怎么写?
我之前一直用this.$router.go(0)这个方法用户体验很不好,因为页面会闪动一下刷新
直到我发现了这个方法 PRovide /inject
不过这个方法貌似有兼容问题,首先要确定一下你的vue版本,此方法适用vue 2.20+
原理:此方法使用的是v-if来控制router-view的显示或隐藏,v-if从false变为true时,vue会重新渲染router-view区域,所以当参数变化时,只需让v-if 从true => false => true,就能实现页面刷新
首先,找到自己的route-view
//App.vue
<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</div>
</template>
<script>
export default {
name: 'App',
provide() {
return {
reload: this.reload//调用reload方法
}
},
data() {
return {
isRouterAlive: true//一开始router-view为true
}
},
methods: {
reload() {
this.isRouterAlive = false
//在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
</script>
然后在<route-view>下显示的vue页面中进行如下操作
export default {
name: 'newproduct',
inject:['reload'],//在export default下面加上这一段
method:{
//调用App.vue下的this.reload()方法,来改变v-if的状态
clickDiv(){//刷新按钮调用的方法
this.reload()
}
}
就ok了
以上是脚本宝典为你收集整理的如何实现vue中不跳转不闪动页面刷新?provide /inject 完美解决方案全部内容,希望文章能够帮你解决如何实现vue中不跳转不闪动页面刷新?provide /inject 完美解决方案所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。