vue+elementui 如何刷新整个界面

以你之姓@ 2022-10-25 12:57 508阅读 0赞

在这里当我们上传图片再对图片进行回显的时候，当前这个vue文件还是可以得到这个图片的地址从而进行回显的，而当我们一个界面是由两个vue构成的呢？那么另一个vue该怎么进行重新加载呢？

第一种方法：对整个界面进行刷新。  
采用window.reload()，或者router.go(0)刷新时，对整个浏览器进行了重新加载

第二种方法：跳转到另一个vue当中又迅速的跳回来

第三种方法：采取 provide / inject 组合  
允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

provide和inject需要配合使用，它们的含义如下:

provide

1.  一个对象或返回一个对象的函数，该对象包含可注入起子孙的属性，可以使用ES6的Symbols作为key(只有原生支持Symbol才可以)

inject：

1.  一个字符串数组或一个对象
2.  字符串数组：provide对象里哪些属性可用
3.  一个对象：key是本地的绑定名，value是provide里对应的对象名，也可以是一个对象，此时from属性是provide里对应的对象名，default属性是不存在时的默认值

如何实现呢？如下：在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(() => { 
              this.isRouterAlive = true
            })
          }
        }
      }
    </script>

在需要进行重加载的页面注入App.vue组件提供（provide）的 reload 依赖，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]  
最后给定逻辑，在某一条件成功之后触发这个重载方法 `this.reload()`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]: /images/20221024/6c8eed3cd862455799a1e0fc62750499.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]: /images/20221024/8f4a1a753b2a44439658eb42c9e7e998.png