最近在写项目的时候需要刷新页面,用window.reload()和this.$router.go(0)发现虽然可以刷新页面但是在刷新的时候会出现短暂的空白,这样用户体验就会特别的不好,然后发现了这个方法,说是在刷新页面的时候不会出现短暂的空白
首先在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{
style:'',
isRouterAlive:true
}
},
methods:{
reload(){ //重加载方法
this.isRouterAlive=false
this.$nextTick(function(){
this.isRouterAlive=true
})
}
}
}
</script>
然后在需要调用这个方法的组件里面在export default的name下面添加inject:['reload']也就是获取APP.vue里面的重加载方法,最后直接调用即可
*:ஐ٩(๑´ᵕ`)۶ஐ:* 学习使我进步emmmm又是需要努力的一天