vue刷新页面 刷新页面的三种方法

vue刷新页面 刷新页面的三种方法

在项目中又刷新整个页面的需求，所以我们来谈谈刷新页面的方法，有两种常见的方法，还有一种不常见但是极力推荐的。

1. 第一种

   this.$router.go(0)

2. 第二种

   location. reload()

   这两种和Ctrl+r 、F5效果一样，是重新加载整个页面，会出现一瞬间白屏的效果，用户体验不好，所以不推荐使用

3. 第三种（推荐），通过provide / inject 的方式，具体方法如下
   App.vue 文件

<template>
  <div id="app">
  // 通过控制 router-view的显示隐藏重新加载 
    <router-view v-if="isRouteAlive" />
  </div>
</template>

<script>
export default {
  name: 'app',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouteAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouteAlive = false
      this.$nextTick(() => {
        this.isRouteAlive = true
      })
    }
  }
}

在需要刷新的页面使用方法如下
test.vue

<template>
	<div>
		<el-button @click="reload">刷新</el-button>
	</div>
</template>
<script>
	export default {
  	name: 'test',
  	inject:['reload'],
  	data() {
  		retrun {}
  	}
</script>

这样子就可以实现刷新了，并且不会出现白屏的效果，用户体现会好很多。