vue无感刷新

介绍：

所谓的“无感刷新”其实就是用vue的【依赖】和【注入】也是【provide】和【inject】来完成的，也就是跨组件传值，在父组件的【provide】选项中定义一个对象，该对象包含你想要共享给子组件的数据或方法。然后在子组件的【inject】选项中指定一个数组或对象，来声明希望注入的属性或方法。

使用：

// app.vue或者父组件,要给子组件传值
<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>

<script>
export default {
  provide () { // 父组件中通过provide来提供变量，在子组件中通过inject来注入变量。
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true // 控制视图是否显示的变量
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false // 先关闭，
      setTimeout(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

<style lang="scss">
</style>

// 在使用的组件,也是子组件
<template>
  <div class="layout-page">
    这是由父组件的<router-view></router-view>呈现的哦！！！
  </div>
</template>

<script>
export default {
  name: 'layout-page',
  nject: ['reload'], // 注入父组件的reload方法
  mounted () {
    const _that = this
    // 如果屏幕变化了就刷新
    window.addEventListener('resize', function (event) {
      _that.reload() // 子组件调用父组件的reload方法
    })
  }
}
</script>

<style lang="scss" scoped>
</style>

总结： 

当然还有其他的方法可以直接使用window.location.reload(true)也能实现重新加载当前页面

window.location.reload()刷新当前页面
 
window.parent.location.reload()刷新父亲对象（用于框架）
 
opener.location.reload()刷新父窗口对象（用于单开窗口）
 
top.location.reload()刷新最顶端对象（用于多开窗口）

window.location.reload(true)是刷新当前窗口，可传参数true，表示不走缓存，从服务端重新获取数据
 
使用window.parent.location.reload()相当于按F5页面刷新，整个页面都会刷新
 
window可以省略