When we are doing the project, we need to refresh the current page to achieve the purpose of data update. Here we summarize some common methods of page refresh.

1.window.location.reload(), a method provided by native JS, this.$router.go(0): a method in vue routing. Both of these methods can achieve the purpose of page refresh. They are simple and rough, but the user experience is not good. They are equivalent to pressing F5 to refresh the page, and there will be a short white screen, which is equivalent to page reload.

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

Current page:

<template>
	<div>
	<el-button type="primary" class="btn" @click="btnaction">Press me to refresh the page</el-button>
	</div>
</template>
<script>
	export default{
		data(){
			return{
			}
		},
		mounted(){
		},
		methods:{
			btnaction() {
//				location.reload()
//              this.$router.go(0)
                this.$router.replace({
                	path:'/empty',
                	name:'empty'
                })
			}
		}
	}
</script>

Blank page:

<template>
	<h1>
		//Empty page
	</h1>
</template>

<script>
	export default{
		data() {
			return{
				
			}
		},
		created(){
			this.$router.replace({
                	path:'/',
                	name:'father'
                })
		}
	}
</script>

When clicking the button, the address bar will have a fast address switching process.

3. Control whether the display of < router View > < router View > is displayed or not. Register a method in the global component, which controls whether the display of router view is displayed or not

APP.vue

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide() { // Register a method
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
        console.log('reload')
      })
    }
  }
}
</script>

Current component:

<template>
	<div>
		<el-button type="primary" class="btn" @click="btnaction">Press me to refresh the page</el-button>
	</div>
</template>

<script>
	export default{
		inject: ['reload'], // Introduction method
		data(){
			return{
			}
		},
		components:{
		},
		mounted(){
		},
		methods:{
			btnaction() {
//				location.reload()
//              this.$router.go(0)
//              this.$router.replace({
//              	path:'/empty',
//              	name:'empty'
//              })
                this.reload() // Calling method
			}
		}
	}
</script>

All pages are re rendered when the button is clicked.

4. Operation method of table refresh after list operation:

When we operate the data table, we will add, delete, modify and query the table. After the operation, we need to refresh the list to achieve re rendering. However, if there is paging, we will delete on page 3, for example. If we use the previous refresh method, we will enter the first page after the refresh, which is certainly not what we want. At this time, our common practice is When we call the data rendering method again, we usually have the data acquisition interface, deletion interface, etc. when the page is loaded, we call the data acquisition method. When we perform the deletion operation, we can call the data acquisition method again.