vue项目强制刷新当前页面无空白

简述

在vue项目开发过程中，有的时候数据不好清空，加载不及时，需要页面做一个强制的刷新，来实现数据及时更新的效果。

方法一

js强制刷新，不推荐使用，因为这种方式虽然可以最简单粗暴的实现效果，但是刷新的时候会有一个空白的间隔期，用户体验不好，所以不推荐使用。
虽然不推荐使用，但是方法还是要交代的。

在需要的地方直接加入这行代码就OK了：window.location.reload();

我是用来解决cookies数据及时存放获取问题的，效果实现，体验不好

// cityCode 持久化
import Cookies from 'js-cookie'

const cityKey = 'fcyz-cityCode'

export function getCode() {
  return Cookies.get(cityKey)
}

export function setCode(code) {
    window.location.reload();
    return Cookies.set(cityKey, code)
}

export function removeCode() {
  return Cookies.remove(cityKey)
}

方法二 强力推荐

这个方法我是解决另一个问题的，上一次的数据不容易清空，数据更新不及时，所以强制刷新页面，实现数据及时更新。

步骤一 修改App.vue 直接拷贝

<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(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

步骤二 在需要强制刷新的组件声明reload方法（这个有点儿像mixin的使用），通过控制router-view的显示隐藏使页面再次加载。

export default {
	name:'index',
	inject: ['reload'],   // 这里得引入，像使用mixin一样
	watch: {
    "$route.params.id": {
        handler(val) {
          this.reload()     //直接调用,强制刷新页面
        }
      },
  },
}