方法1：直接调用函数
将整个页面重载, 以下两种都可以
1.window.location.reload()
2.this.$router.go()
方法2：采用provide / inject(静刷新)
在高阶函数中声明一个reload刷新函数
<template>
<div id="app" v-if="show"></div>
</template>
<script>
export default {
// 控制显示/隐藏, 实现刷新
data () {
return {
show: true
}
},
// 把刷新的方法传给低阶组件
provide () {
return {
reload: this.reload
}
},
methods: {
// 高阶组件定义刷新方法
reload () {
this.bol = false
this.$nextTick(() => {
this.bol = true
})
}
}
}
</script>
在低阶组件中使用刷新函数
<template>
<div></div>
</template>
<script>
export default {
inject: ['reload'],
methods: {
// 低阶组件, 刷新
fun () {
this.reload()
}
}
}
</script>
优势比较
- 方法1中直接调用函数, 会导致整个网站刷新，会浪费性能些，用户体验也不好; 大型网站这样刷新下，需要等几秒浏览器左上角可以看到刷新的动画;
- 方法2中采用provide / inject, 用户不会感觉到刷新, 而且刷新的页面内容范围可控制, 相对浪费性能会少很多
以上就是应用provide与inject刷新Vue页面方法的详细内容，更多关于Vue页面刷新的资料请关注编程网其它相关文章！
