Foreword
Recently made front-end projects, the need for a page refresh, at the time this question for myself, still is relatively difficult, and later after a series of studies, finally solved the problem, today, to record it!
through
proviceAnd injectthe method of combining solve There are many ways to refresh the page, compared to the experience of this approach is that much better, so we only introduce this kind of program.
① In the first App.vuestatement following methods in components, such as:
<template>
<div id="app">
<router-view v-if="IsRouterAlive"/>
</div>
</template>
<script>
export default{
name:'App',
provide(){
return{
reload:this.reloda
}
},
data(){
return{
style:'',
IsRouterAlive:true
}
},
methods:{
reload(){
this.IsRouterAlive=false;
this.$nextTick(function(){
this.IsRouterAlive=true;
})
}
}
}
</script>
② call this method to the component you want to refresh the page:
<script>
export default{
name: "Header",
inject:['reload']
},
methods:{
flushCom:function(){
this.reload();
}
}
</script>
to sum up
Get down, get down, we can solve some of their own thought is not easy, simple thing, attitude is everything, attitude is very important, after this time of learning, knowledge and master a little, well, here and share with you, I hope you can leave a message at the bottom, more exchanges!
