當我們在做專案時，我們需要做當前頁面的重新整理來達到資料更新的目的，在此我們大概總結了幾種常用的頁面重新整理的方法。

1.window.location.reload(),是原生JS提供的方法，this.$router.go(0):是vue路由裡面的一種方法，這兩種方法都可以達到頁面重新整理的目的，簡單粗暴，但是使用者體驗不好，相當於按F5重新整理頁面，會有短暫的白屏，相當於頁面的重新載入。

2.通過路由跳轉的方法重新整理，具體思路是點選按鈕跳轉一個空白頁，然後再馬上跳回來：

當前頁面：

<template>
	<div>
	<el-button type="primary" class="btn" @click="btnaction">摁我重新整理頁面</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>
 

空白頁面：

<template>
	<h1>
		空頁面
	</h1>
</template>

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

當點選按鈕時位址列會有快速的地址切換過程。

3.控制<router-view></router-view>的顯示與否，在全域性元件註冊一個方法，該方法控制router-view的顯示與否，在子元件呼叫即可：

APP.vue

<template>
  <div id="app">
    <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
        console.log('reload')
      })
    }
  }
}
</script>
 

當前元件：

<template>
	<div>
		<el-button type="primary" class="btn" @click="btnaction">摁我重新整理頁面</el-button>
	</div>
</template>

<script>
	export default{
		inject: ['reload'], // 引入方法
		data(){
			return{
			}
		},
		components:{
		},
		mounted(){
		},
		methods:{
			btnaction() {
//				location.reload()
//              this.$router.go(0)
//              this.$router.replace({
//              	path:'/empty',
//              	name:'empty'
//              })
                this.reload() // 呼叫方法
			}
		}
	}
</script>

當點選按鈕時所有頁面重新渲染。

4.對列表操作後的表格重新整理的操作方法：

當我們在操作資料表格時，會對錶格進行增刪改查，做完操作我們需要對列表進行重新整理來達到重新渲染，但是當如果存在分頁，我們在比如第3頁進行刪除操作，如果按照以往的重新整理方法，重新整理完後便進入了第一頁，這肯定不是我們想要的，這時候我們常用的做法是重新呼叫資料渲染方法，通常我們會有獲取資料介面，刪除介面等等，頁面載入時呼叫獲取資料的方法，當我們執行刪除操作時，再重新呼叫獲取資料的方法即可。