失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > vue实现页面刷新以及局部刷新的方法

vue实现页面刷新以及局部刷新的方法

时间:2021-07-07 15:51:48

相关推荐

vue实现页面刷新以及局部刷新的方法

1、利用Vue里面的provide+inject组合,实现全页面刷新

通过在APP页面进行demo进行刷新,不会像前两种那样出现短暂的闪烁效果,提升用户体验,通常可以使用这种方式

(1)在APP页面中写入下面代码

<template><div id="app"><router-view v-if="isShow"/></div></template><script>export default {name: 'App',provide(){return{reload:this.reload}},data(){return{isShow:true}},methods:{reload(){this.isShow=false;this.$nextTick(()=>{this.isShow=true})}}}</script>

(2)在需要刷新的页面进行引入并使用

<template><div><div class="header"><button @click="update()">刷新页面</button></div></div></template><script>export default {data(){return{}},inject:['reload'],methods:{update(){this.reload()console.log('刷新页面')}}}</script>

2、实现页面中局部刷新

(1)定义局部刷新的方法 reload:

<template><div v-if="isShow" class="sub-wrapper"><PieChart :chartData="list" /></div></template><script>export default{data(){return{isShow: true,}},methods: {reload () {//局部刷新this.isShow = false;this.$nextTick(() => {this.isShow = true})},}}</script>

(2)在需要执行局部刷新的方法中进行调用

Refresh() {this.reload()WorkorderStateReport().then((res) => {this.loading = true;if (res.data.length > 0) {this.list = res.data;}});},

参考链接:

1、/qq_32555123/article/details/124627017

2、/article/233809.htm

如果觉得《vue实现页面刷新以及局部刷新的方法》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。