vue项目不切换路由刷新页面

需求说明：

点击铃铛图标跳转到 /msg/index 路由页面下，同时调用APi查询消息列表。
如果当前处于消息页时，重新加载路由刷新页面。

解决办法：

利用VUE提供的provide / inject 组合，简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。
首先，修改 <router-view/ >所在的页面，一般为App.vue 或项目布局所在的vue组件内（附主要部分代码）

<template>
  <div>
      <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
  export default {
    name: "index",
	// 通过provider来提供变量,此处为重新加载路由的方法
    provide() {
      return {
        reload: this.reload
      }
    },
    data() {
      return {
        isRouterAlive: true
      }
    },
    methods: {
    	// 通过对router-view的v-if属性赋值，重新加载路由
      reload() {
        this.isRouterAlive = false;
        this.$nextTick(() => {
          this.isRouterAlive = true;
        })
      }
    }
  }
</script>

在需要触发事件的vue组件中注入依赖,此处为我的Header组件内。

<template>
	<div>
       <i class="el-icon-message-solid message"  @click="toMessage"></i>
	</div>
</template>
export default {
    name: "Header",
    inject: ['reload'], // 直接注入依赖
    data() {
      return {
        
      }
    },
   methods: {
  	 /* 跳转信息页对应的路由 */
      toMessage() {
        if (this.$route.path === '/msg/index') {
        // 处于信息页时调用依赖中的方法刷新路由
          this.reload();
        } else {
        // 跳转
          this.$router.push('/msg/index')
        }
      }
   },
  }

附：额外提供两种解决方案
1：刷新标签页，该方案会重新加载整个页面，导致出现一瞬间的空白，影响用户体验

localtion.reload() 
this.$router.go(0)

2：新建一个空白页面supplierAllBack.vue，点击确定的时候先跳转到这个空白页，然后再立马跳转回来

可参考文章：vue项目如何刷新当前页面