记录下自己做Vue项目遇到问题的解决方法
Vue中使用provide / inject 组合刷新当前页
1.打开App.vue
声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view> <!-- 添加router-view -->
</div>
</template>
<script>
export default {
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return{
isRouterAlive:true
}
},
methods:{
//声明reload方法
reload(){
this.isRouterAlive = false
this.$nextTick(function(){
this.isRouterAlive =true
})
}
}
}
</script>
2.在页面注入App.vue组件提供(provide)的 reload 依赖,并在方法中调用
export default {
inject:['reload'], //在页面注入App.vue组件提供(provide)的 reload 依赖
methods: {
// 新增确定按钮
async add() {
this.addDialog = false;
this.reload() //在方法中调用
},
}
}
完成