如何讓vue中router當前頁面跳轉並刷新、及頁面跳轉防閃屏

導讀： 在vue-router中，在當前頁面中點擊當前頁面的路由，頁面是不會進行刷新的，如何做到點擊當前頁面並進行刷新呢？

解決方法:

1. this.$router.go(0);

2. location.reload()

上兩種方法 都會出現閃屏的問題 影響用戶體驗。如何做到頁面刷新不閃屏呢？

3. 用一個空頁面做中轉，空白頁面再跳轉回來，解決了閃屏的問題，但如果用戶點擊返回上一頁便會出現問題，也不行

   終級解決

4. 在App.vue,聲明reload方法，控制router-view的顯示或隱藏，從而控制頁面的再次加載。(provide /inject )

   祖先組件(provide )會向其所有子孫后代(inject )注入一個依賴

   <template>
   	<div>
   		<!-- 綁定v-if -->    
     	<router-view v-if="routerState"></router-view>
     </div>
   </template>
   
   <script>
     export default {
       name: 'App',
       //向子組件注入依賴
       provide(){
         return{
           reload:this.reload
         }
       },
       //聲明變量
       data(){
         return{
           routerState:true
         }
       },
       methods:{
         //利用$nextTick特性，router跳轉完成后展示頁面
         reload(){
           this.routerState = false;
           this.$nextTick(()=>{
             this.routerState = true;
           })
         }
       }
     }
   </script>
   

   在需要的頁面 調用方法

   inject:["reload"],
   methods:{
     clickRouter(){
         if(this.$route.path !== '/test'){
           this.$router.push('/test/id'+this.id);
         }else{
           this.reload();
         }
     }
   }
   

原理其實很簡單，通過reload在重新加載當前組件，進行調用生命周期函數中的數據加載

新增一種解決方法
5. 使用key的唯一性來重置router-view

使用場景：創建和編輯的頁面使用的是同一個component，需要重新調用生命周期函數重新載入數據

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }