vue刷新当前页

主要是关于退出登录后,首页的变化
1.点击退出登录,路由跳转到当前页

logout(){
this.$router.push({path:'/'})
}

image.png

登录状态刷新了,但是页面没有刷新的效果,用户体验感不好
2.使用vue中一对API provide inject,配合vue Router实现刷新

//App.vue
<template>
<div id="app">
<router-view v-if="isReloadAlive"/>
</div>
</template>
<script>
export default{
name:'App',
//实现页面刷新
provide(){
return{
reload:this.reload
}
},
data(){
return{
isReloadAlive:true
}
},
methods:{
reload(){
this.isReloadAlive=false
this.$nextTick(()=>{
this.isReloadAlive=true
})
}
}
}
}

//login.vue
export default {
inject:['reload'],
methods:{
offLogin(){
this.reload()
}
}
}

image.png