Vue项目中刷新当前页面的四种方法

• 前记
• 刷新当前页面的四种方法
• this.$router.go(0)
• location.reload()
• 跳转空白页再跳回原页面
• 使用provide / inject组合控制的显示（推荐）

前记

有时候，在当前页面添加或删除一条记录的时候希望当前页面可以刷新一下，从而更新页面数据。
我们知道，在路由到另一页面的时候会重新加载该页面，相当于刷新了页面，但是使用vue-router重新路由到当前页面，页面是不进行刷新的。下面介绍几种刷新页面的方法。

刷新当前页面的四种方法

this.$router.go(0)

这种方法页面会一瞬间的白屏，体验不是很好，虽然只是一行代码的事，而且有时候刷新效果并不理想。

location.reload()

这种也是一样，画面一闪，效果总不是很好。

跳转空白页再跳回原页面

新建一个空白页面empty.vue，点击确定的时候先跳转到这个空白页，然后再立马跳转回来。
在需要刷新的页面添加路由跳转：

this.$router.replace({ path:'/empty' })

在空白页的created函数中添加路由跳转：

created(){
this.$router.replace({ path:'待刷新页面的path路径' })
}

这个方式，相比前两种不会出现一瞬间的空白页，只是地址栏有个快速的切换的过程，可采用。

使用provide / inject组合控制的显示（推荐）

vue官方说明中允许一个祖先组件通过设置provide/inject向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。provide/inject 是解决组件之间的通信问题的利器，不受层级结构的限制。
在项目中修改app.vue文件：

<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</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>

通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载（通过isRouterAlive的值来控制）。然后在需要当前页面刷新的页面中注入App.vue组件提供（provide）的 reload 依赖，然后直接用**this.reload()**来调用就行。

注入依赖：

export default {
inject:['reload'],  //注入依赖
name: "CompanyConfigure",
data() {
return {... ...

调用：

this.reload();

特别强调：使用reload方法时刷新页面可能会使作用域中的其他代码不会执行，所以尽量单独使用reload方法，或将其他全局的代码放在reload方法中一起调用。