vue 中刷新当前页面方式

有时候在项目中我们需要在页面完成一些操作后,进行页面刷新.文中重点介绍provide / inject组合是vue2.2.0新增的api

1. this.$router.go(0)

• this.$router.go(0). 通过路由跳转的方式重新渲染页面, 虽然代码量很少,便于书写和理解,但是体验很差,在刷新的一瞬间会出现白屏的现象.

2. location.reload()

• location.reload(). 该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可能从缓存中读取页面。
• 缺点:该方法在跨域调用（执行该方法的脚本文件的域和 Location 对象所在页面的跨不同）时，将会抛出 DOMException 异常。并且也同样会出现页面在刷新的时候会出现白屏的现象

3. provide / inject组合

• 原理: 以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
• 提示: provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
• 在APP.vue中,声明reload方法,控制router-view模块的显示或者隐藏,从而控制页面的再次加载.

  <template>
   <div id="app">
     <router-view v-if="isRouterAlive"></router-view>
   </div>
  </template>
  
  <script>
  export default {
   name: 'App',
   provide () {
     return {
       reload: this.reload
     }
   },
   data () {
     return {
       isRouterAlive: true
     }
   },
   methods: {
     reload () {
       this.isRouterAlive = false
       this.$nextTick(function () {
         this.isRouterAlive = true
       })
     }
   }
  }
  </script>
  

• 在需要刷新的页面,直接注入inject的reload依赖,在逻辑操作完成后需要刷新的位置,使用this.reload()调用,即可刷新当前页面.

  export default {
    name: "ItemPage",
    components: {},
    inject: ["reload"], //注入reload方法
    data() {
      return {
      };
    },
    methods: {
      //页面逻辑操作方法
      handleClick() {
        //此处操作页面功能
        //.......
  
        this.reload(); //此处刷新页面
      }
    },
    mounted() {
    }
  };