vue+elementui 如何刷新整个界面-蒲公英云

vue+elementui 如何刷新整个界面

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

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

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

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

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

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

provide

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

inject：

一个字符串数组或一个对象
字符串数组：provide对象里哪些属性可用
一个对象：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>