vue element局部页面刷新（非常好用）

星星掉进大海

已于 2023-06-05 16:50:32 修改

阅读量707

点赞数

文章标签： vue.js 前端 javascript

于 2023-06-03 22:49:29 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47609911/article/details/131026720

版权

文章介绍了如何在VueElement项目中通过provide/inject组合控制来实现页面刷新。当需要刷新当前页面时，不是通过vue-router重新路由，而是通过在祖先组件（如App.vue）中提供reload方法，控制router-view的显示/隐藏，以此达到刷新效果。在需要刷新的子组件中注入reload方法并调用，但需要注意，reload可能导致其他代码不执行，应谨慎使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue element页面刷新（非常好用）

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

使用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方法中一起调用。