共计 828 个字符，预计需要花费 3 分钟才能阅读完成。
在 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 了
加油！每天进步一点点！
