vue.js项目中重新加载当前页面的方法
vue.js项目中重新加载当前页面的方法一.业务场景1.在处理完编辑或者删除按钮时,需要有当前页面重新加载的需求。二.解决方法provide/inject的组件组合具体使用方法:1.在前端vue项...
·
一.业务场景
1.在处理完编辑或者删除按钮时,需要有当前页面重新加载的需求。
二.解决方法
provide/inject的组件组合
具体使用方法:
1.在前端vue项目App.vue中添加如下代码
<template>
<div id="app">
<router-view v-if = "isRouterALive"/>
<div>
</template>
<script>
export default {
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return{
isRouterAlive:true
}
},
methods:{
reload(){
this.isRouterAlive=false
this.$nextTick(function () {
this.isRouterAlive = true
})
}
}
}
</script>
2.在index页面的使用:
在页面注入App.vue组件提供(provide)的 reload 依赖,如下面代码块:inject:[‘reload’]。在逻辑完成之后(删除或添加…),在methods中直接this.reload()调用,即可重新加载当前页面。
<script>
export default {
name: 'index.vue',
components:{xxx,xxx,xxx},
inject: ['reload'],
methods:{
getTableData:function(){
this.reload()
}
</script>
项目使用亲测有效。
更多推荐
已为社区贡献1条内容
所有评论(0)