Vue項目如何刷新當前頁面

1、場景：

項目需求是：在課程詳情頁 點擊 相關課程 還在當前頁面看此課程詳情；

功能實現：這時候點擊相關課程須要從新加載刷新當前路由

2、’解決的辦法及遇到的問題

1. this.$router.go(0)。這種方法雖然代碼不多，只有一行，可是體驗不好。頁面會一瞬間的白屏，體驗不是很好
2. 用vue-router從新路由到當前頁面，頁面是不進行刷新的。
3. .location.reload()。這種也是同樣，畫面一閃，體驗不是很好

3、推薦解決方法：

用 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