如何让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(){
       this.$router.push('/test/id'=1);
       this.reload();
     }
   }