业务场景
在管理后台执行完增删改查的操作之后,需要重新加载页面刷新数据以便页面数据的更新
实现原理
就是通过控制router-view 的显示与隐藏,来重渲染路由区域,重而达到页面刷新的效果,show -> flase -> show
具体代码
1.首先在我们的根组件APP.vue里面,写入刷新方法,路由初始状态是显示的
<template>
<div >
<el-container class="wrap">
<el-header>
<headers></headers>
</el-header>
<el-main>
//if判断状态
<router-view v-if="isRouterAlive"></router-view>
</el-main>
</el-container>
</div>
</template>
<script>
import headers from "../components/headers.vue"
export default {
//刷新方法
provide(){
return{
reload:this.reload
}
},
data(){
return{
isRouterAlive:true
}
},
methods:{
//解决页面刷新,重新渲染数据
reload(){
this.isRouterAlive=false;
this.$nextTick(()=>{
this.isRouterAlive=true
})
}
},
};
</script>
2.在需要调用的子组件中引用,需要先用inject先注入reload方法,然后在需要的地方调用this.reload()文章来源:https://www.toymoban.com/news/detail-503154.html
文章来源地址https://www.toymoban.com/news/detail-503154.html
到了这里,关于Vue强制刷新页面重新加载数据方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!