vue 刷新 当前页面

场景

页面需要重置刷新的地方

刷新当前页有可以采用一下3种方式

1、window.location.reload()

是原生JS提供的方法，整个浏览器进行了重新加载，闪烁，体验不好

2、this.$router.go(0)

是vue路由里面的一种方法，整个浏览器进行了重新加载，闪烁，体验不好

3、通过路由跳转的方法刷新，具体思路是点击按钮跳转一个空白页，然后再马上跳回来

4、provide / inject 组合

在 APP.vue

<!--
 * @Description: file content
 * @Author: Author
 * @Date: 2019-11-25 19:08:57
 -->
<template>
    <div id="app">
      <router-view v-if="isRouterAlive" />
    </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>
<style>
  #app {
    height: 100%;
  }
</style>

需刷新的页面

<template>
	<div>
		<el-button type="primary" class="btn" @click="reload">刷新页面</el-button>
	</div>
</template>
 
<script>
	export default{
		name: 'reloadpage'
		inject: ['reload'], // 引入方法
		data(){
			return{
			}
		},
	}
</script>