一、场景：
项目需求是：在课程详情页 点击 相关课程 还在当前页面看此课程详情；
功能实现：这时候点击相关课程需要重新加载刷新当前路由
二、解决的办法及遇到的问题
this.$router.go(0)。这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好用vue-router重新路由到当前页面，页面是不进行刷新的。.location.reload()。这种也是一样，画面一闪，体验不是很好三、推荐解决方法：
用 provide / inject 组合
原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效
1.在App.vue,声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载。
<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 //控制router-view的显示或隐藏
}
},
methods:{
reload(){
this.isRouterAlive = false;
this.$nextTick(()=>{
this.isRouterAlive = true;
})
}
}
}
</script>
2.在需要用到刷新的页面中注入App.vue组件提供（provide）的 reload 依赖，在逻辑完成之后,直接this.reload()调用，即可刷新当前页面。
注入reload方法
直接调用 this.reload
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！