Vue项目刷新当前页面的三种方法：provide/inject方案最实用

脚本专家

在开发Vue单页应用时，经常会遇到这样的场景：执行删除或新增操作后，希望当前页面的表格数据能自动刷新。很多同学的第一反应是使用 this.$router.push 重新导航到当前页面，但实际会发现页面不会重新渲染——因为Vue的组件实例没有被销毁重建。下面整理三种可落地的刷新方案，供大家参考。

方法一：强制整页刷新
最简单的做法是使用原生方法：

2. location.reload()
3. // 或
4. this.$router.go(0)

复制代码

这两种方式都会让浏览器对整个页面进行硬刷新（等同于按 Ctrl+F5），页面会短暂出现白屏，用户体验较差。适用于对交互要求不高或调试场景。

方法二：跳转空白中转页再跳回
创建一个空白页面（例如 supplierAllBack.vue）作为中转，执行操作后先跳转到该空白页，再立即重定向回原页面。空白页的脚本大致如下：

2. // supplierAllBack.vue
3. export default {
4.   created() {
5.     this.$router.replace('/supplier/supplierAll')
6.   }
7. }

复制代码

调用时：

2. this.$router.push('/supplier/supplierBack')

复制代码

这种方法的优点是页面不会闪烁白屏，但地址栏会快速从原页面跳转到空白页再跳回来，会有短暂的URL切换痕迹。可接受的话可以采用。

方法三：provide/inject 搭配 v-if 控制组件销毁重建（推荐）
在 App.vue 中声明一个 reload 方法，通过控制 router-view 的显示/隐藏来实现子组件的重新实例化。具体实现步骤如下：

1. 修改 App.vue：

2. // App.vue
3. <template>
4.   <div id="app">
5.     <router-view v-if="isRouterAlive" />
6.   </div>
7. </template>
9. <script>
10. export default {
11.   provide() {
12.     return {
13.       reload: this.reload
14.     }
15.   },
16.   data() {
17.     return {
18.       isRouterAlive: true
19.     }
20.   },
21.   methods: {
22.     reload() {
23.       this.isRouterAlive = false
24.       this.$nextTick(() => {
25.         this.isRouterAlive = true
26.       })
27.     }
28.   }
29. }

复制代码

2. 在需要刷新当前页面的组件中注入 reload 方法：

2. // 需要刷新的组件（如 supplierAll.vue）
3. export default {
4.   inject: ['reload'],
5.   methods: {
6.     handleDelete() {
7.       // 删除逻辑...
8.       this.reload()  // 刷新当前页面
9.     }
10.   }
11. }

复制代码

这种方案不会造成页面白屏，也不会出现地址栏跳跃，只是组件被销毁并立即重建，所有生命周期钩子（如 created、mounted）会重新执行，表格数据会重新请求。这是最推荐的方式，适用于多数需要局部刷新的场景。

总结对比：
- 方法一：简单粗暴，但有白屏；
- 方法二：无白屏但有短暂的URL切换；
- 方法三：无白屏、无URL切换，实现优雅，推荐在实际项目中使用。

注意：使用 provide/inject 时，reload 方法中先设置 isRouterAlive=false，再用 $nextTick 恢复为 true，这是为了确保组件确实被销毁并重新创建。如果去掉 $nextTick，Vue 会合并同一个 tick 中的两次数据变化，导致组件不会重建。

热心网友6

感谢楼主分享，总结得很清晰！第三种 provide/inject 的方案确实很优雅，在实际项目中也用过几次，避免了白屏和 URL 跳转的尴尬。不过补充一个小细节：如果组件内部有异步请求或定时器，记得在 `beforeDestroy` 里清除一下，防止组件重建后产生副作用。另外，对于多级嵌套的路由组件，也可以考虑在需要刷新的子组件里直接注入 reload，效果一样。楼主对三种方案的对比很实用，收藏了！