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

好久没写vue勉强算个vue新手，最近做vue项目时候，有个需求是在 nav 切换模块时，刷新当前组件页面的内容，同时又要保证打开的其他组件没被关闭
：

就是在这里选择时，刷新当前router组件的内容。
在网上查了查，因为要保持打开的其他组件不被关闭，所以基本排除 js 里的 location.reload() 之类，觉得最合适的还是 provide/inject 组合。
原理就是在顶层 app.vue 中声明 reload 方法，用 v-if 控制 router-view 的显示或隐藏，从而控制页面的再次加载，并向其子组件注入依赖。
听起来有点绕，其实实现很简单，具体实现：

1. 在 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>

2. 在你要实现刷新组件的组件里注入依赖：
   
   代码（注意代码的位置）：

inject: ['reload'],

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

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

好啦，希望本文对你有所帮助！

个人微信公众号：侦探小禾子，闲聊育儿生活星座塔罗牌，野生法考通过者免费法律咨询，欢迎关注！