如何让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()
    }
 }