vue中实现刷新当前组件页面内容（router-view）并保持项目其他组件打开状态（provide inject使用）

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

以前用vue2写项目时候，有个需求是在 nav 切换模块时，刷新当前组件页面的内容，同时又要保证打开的其他组件没被关闭：

就是在这里选择时，刷新当前router组件的内容。

当时在网上查了查，因为要保持打开的其他组件不被关闭，所以基本排除 js 里的 location.reload() 之类，觉得最合适的还是 provide/inject 组合。

原理就是在顶层 app.vue 中声明 reload 方法，用 v-if 控制 router-view 的显示或隐藏，从而控制页面的再次加载，并向其子组件注入依赖。

听起来有点绕，其实实现很简单，具体实现：

在 app.vue 中添加下图这些

为了方便自行下载测试，把上图中的代码粘贴如下：

<template>
  <div id="app">
    <router-view v-if="ifRouterAlive" />
  </div>
</template>

<script>
export default {
  name: 'App',

  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      ifRouterAlive: true,
    }
  },
  methods: {
    reload() {
      this.ifRouterAlive = false;
      this.$nextTick(() => {
        this.ifRouterAlive = true;
      });
    },
  },
}
</script>

在你要实现刷新组件的组件里注入依赖：

inject: ['reload'],

使用——在你要触发刷新组件的事件中调用 reload 方法就行：

// 切换模块后刷新当前页面
      this.reload();

说明: provide 和 inject 是2.2.0版本新增的, 主要为高阶插件/组件库提供用例。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject 选项应该是：一个字符串数组，或一个对象，对象的 key 是本地的绑定名，value 是：在可用的注入内容中搜索用的 key (字符串或 Symbol)，或一个对象。

provide 和 inject 的一般使用场景是：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问祖先组件的数据

希望本文对你有所帮助！