Vue刷新页面的三种方式

 

•        原始方法：

  location.reload();
  

   
• vue自带的路由跳转：

  this.$router.go(0)

  前两者都是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。
  所以，我们选择第三种方式：
•  
• 首先在App里面写下如下代码：

  <template>
      <el-container class="home">
          <router-view class="main" v-if="isRouterAlive"/>
      </el-container>
  </template>
  
  <script>
  
      export default {
          name: "home",
          provide() {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。                                             
              return {
                  reload: this.reload                                              
              };
          },
          data() {
              return{
                  isRouterAlive: true, //控制视图是否显示的变量
              };
          },
           methods: {
              reload() {
                  this.isRouterAlive = false;            //先关闭，
                  this.$nextTick(function() {
                      this.isRouterAlive = true;         //再打开
                  });
              }
          }
      };
  </script>

  接下来，我们就可以在需要刷新页面的组件里这样写：

  export default {
      inject:['reload'],                                 //注入App里的reload方法
      data () {
          return {
      	.......
          }
      },

  
  
  在需要刷新页面的代码块中使用：

  this.reload();