|
方法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页面刷新的资料请关注51zixue.net其它相关文章！
下载地址:
微信小程序实现左右联动
Vue实现登录以及登出详解 |
