1. 常规方法
location.reload()、this.$router.go(0) (会短暂出现空白)
2. 更新视图和数据
调用强制更新方法this.$forceUpdate()会更新视图和数据，强制触发vue的update方法。
3. provide/inject 配合 v-if（推荐）
看如下provide/inject实例：
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
})
}
}
}
</script>页面中引用
<script>
export default {
inject:['reload'],
methods:{
update(){
// 在需要用到的事件中调用this.reload()；函数即可
this.reload()
}
}
</script>原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。在App.vue,声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载。
那么单独的组件呢？如何刷新
开发过程中会遇到一个页面多个组件，特定条件下，我只想刷新单个组件，不要整个页面重载怎么办。
同理使用v-if指令：如果是刷新某个子组件，则可以通过v-if指令实现。我们知道，当v-if的值发生变化时，组件都会被重新渲染一遍。因此，利用v-if指令的特性，可以达到强制刷新组件的目的。
<template>
<Icon type="md-refresh" @click="refreshPage" />
<OrderInfo v-if="isShow"></OrderInfo>
</template>
<script>
export default {
data(){
isShow:true
},
method:{
refreshPage(){ // 单独刷新页面
console.log("刷新”");
this.isShow = false;
this.$nextTick(() => {
this.isShow = true;
})
}
}
}
</script>
