The first traceless refresh

First register a method in the global component, use this method to control the display of the router view, and then call it in the sub component;
Display controlled by v-if;
provide: global registration method;
inject: the subcomponent refers to the method of providing registration;

APP.vue code

<template>
  <div id="app">
    <!-- Add to v-if judge -->
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  provide() {
    //Register a global method
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      isRouterAlive: true
    };
  },
  methods: {
    reload() {
      //Refresh page
      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>

Refresh the current component:

<template>
  <div id="index">
    <el-button type="success" icon="el-icon-plus" @click=" updataall()">No trace refresh</el-button>
  </div>
</template>
<script>
export default {
  name: "index",
  inject: ["reload"],//Introduction method
  data() {
    return {
    };
  },
  methods: {
    updataall() {
      this.reload(); //Call method to refresh the current page   
    }  
  }
};
</script>

Second forced refresh

window.location.reload()  //Methods provided by native js; can be abbreviated to: location.reload()
window.history.go(0)   //The window here can be omitted
this.$router.go(0)  //A method in vue routing;

Both of these methods can achieve the purpose of page refresh, which is simple and crude, but the user experience is not good. It is equivalent to pressing F5 to refresh the page, and the page will be reloaded with a short white screen.

Third fake refresh

Refresh by the route jump method. The specific idea is to click the button to jump to a blank page, and then jump back immediately:

Current page 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'
                })
			}
		}
	}

Blank page kong.vue

<template>
	<h1>
		//Empty page
	</h1>
</template>
 
<script>
	export default{
		data() {
			return{
				
			}
		},
		created(){
			this.$router.replace({
                	path:'/index',
                	name:'Index'
                })
		}
	}

index.js route configuration of router

{
    path: '/index', 
    name: 'Index',
    component: Index,
  },
  {
    path: '/kong', 
    name: 'Kong',
    component: Kong,
 },