vue 刷新页面
第一种 无痕刷新
第二种 强制刷新
第三种 伪造刷新

第一种 无痕刷新
先在全局组件注册一个方法，用该方法控制 router-view 的显示与否，然后在子组件调用；

用 v-if 控制  的显示；

provide：全局注册方法；

inject：子组件引用 provide 注册的方法；
APP.vue代码
<template>
  <div id="app">
    <!-- 添加v-if判断 -->
    <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>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

当前组件进行刷新：
<template>
  <div id="index">
    <el-button type="success" icon="el-icon-plus" @click=" updataall()">无痕刷新</el-button>
  </div>
</template>
<script>
export default {
  name: "index",
  inject: ["reload"],//引入方法
  data() {
    return {
    };
  },
  methods: {
    updataall() {
      this.reload(); //调用方法，刷新当前页   
    }  
  }
};
</script>

第二种 强制刷新
window.location.reload()  //原生 js 提供的方法；可以简写为：location.reload()
window.history.go(0)   //这里的window可以省略不写
this.$router.go(0)  //vue 路由里面的一种方法；

这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按 F5 刷新页面，页面的重新载入，会有短暂的白屏。
第三种 伪造刷新
通过路由跳转的方法刷新，具体思路是点击按钮跳转一个空白页，然后再马上跳回来：
当前页面index.vue

<template>
	<div>
	<el-button type="primary" class="btn" @click="btnaction">ti'ao'zhuang</el-button>
	</div>
</template>
<script>
	export default{
		data(){
			return{
			}
		},
		mounted(){
		},
		methods:{
			btnaction() {
                this.$router.replace({
                	path:'/kong',
                	name:'Kong'
                })
			}
		}
	}

空白页面kong.vue
<template>
	<h1>
		空页面
	</h1>
</template>
 
<script>
	export default{
		data() {
			return{
				
			}
		},
		created(){
			this.$router.replace({
                	path:'/index',
                	name:'Index'
                })
		}
	}

router的index.js路由配置
{
    path: '/index', 
    name: 'Index',
    component: Index,
  },
  {
    path: '/kong', 
    name: 'Kong',
    component: Kong,
 },

刷新页面代码

//原生刷新
location. reload()
//vue刷新
this.$router.go(0)

我们在写项目的时候，经常会遇到，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。如：用户登录成功、增加、删除、更新等。

1.原始方法：

原始

window.location.reload();


window.reload是重新加载当前需要的所有内容，也就包括页面和后台的代码，此过程中实际上是从后台重新进行操作；


一般用于表格的加载更多的时候刷新表格使用

     <s-table
        ref="table"
        size="default"
        rowKey="key"
        :columns="columns"
        :data="loadData"
        :alert="true"
        :rowSelection="rowSelection"
        showPagination="auto"
     />

this.$refs.table.refresh()


window.Refresh是刷新，保留之前的缓存内容，重新加载页面，之前存在的东西不会动，没加载上来的东西继续加载，也会去加载后台代码内容的。

2.vue自带的路由跳转：
this.$router.go(0);

用过的人都知道，前两者都是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。

所以，我们选择第三种方式：
3. 首先在App里面写下如下代码：
<template>
    <div id="app">
    	<router-view v-if="isRouterAlive"></router-view>
	</div>
</template>
<script>
    export default {
        name: 'App',
        provide () {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。                                             
            return {
                reload: this.reload                                              
            }
        },
        data() {
            return{
                isRouterAlive: true                    //控制视图是否显示的变量
            }
        },
        methods: {
            reload () {
                this.isRouterAlive = false;            //先关闭，
                this.$nextTick(function () {
                    this.isRouterAlive = true;         //再打开
                }) 
            }
        }
    }
</script>


接下来，我们就可以在需要刷新页面的组件里这样写：
export default {
    inject:['reload'],                                 //注入App里的reload方法
    data () {
        return {
    	.......
        }
    },

在需要刷新页面的代码块中使用：
this.reload();

我们在写项目的时候，经常会遇到，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。如：用户登录成功、增加、删除、更新等。

原始方法：

location.reload();


vue自带的路由跳转：

this.$router.go(0);

用过的人都知道，前两者都是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。

所以，我们选择第三种方式：

3. 首先在App里面写下如下代码：
<template>
    <div id="app">
    	<router-view v-if="isRouterAlive"></router-view>
	</div>
</template>
<script>
    export default {
        name: 'App',
        provide () {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。                                             
            return {
                reload: this.reload                                              
            }
        },
        data() {
            return{
                isRouterAlive: true                    //控制视图是否显示的变量
            }
        },
        methods: {
            reload () {
                this.isRouterAlive = false;            //先关闭，
                this.$nextTick(function () {
                    this.isRouterAlive = true;         //再打开
                }) 
            }
        }，
    }
</script>

接下来，我们就可以在需要刷新页面的组件里这样写：
export default {
    inject:['reload'],                                 //注入App里的reload方法
    data () {
        return {
    	.......
        }
    },

在需要刷新页面的代码块中使用：
this.reload();