vue根据路由刷新页面（切换菜单刷新页面）

刷新页面有两种方法：
一种是用:localtion.reload()；但是这种是重新加载页面，造成一闪一闪的效果。
一种是用provide+inject，
provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。
需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。
1.在app.vue页面中加入

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

  provide() {
      return{
        reload: this.reload
      }
    },
    data() {
      return {
        isRouterAlive: true
      }
    },
 methods: {
      reload () {
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true
        })
      }
    },

2.在菜单页面加入

inject: ['reload'],  // 注入重载的功能（注入依赖）
watch: {
    //检测路由参数发生改变时，刷新当前页面 调用
    '$route': function(){
      // this.reload();
    }
  },

3.注意这个@click方法，里面就是调用重新加载的方法

 <el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
                    :index="item[pathKey]"
                    @click="open(item)"
                    :key="item[labelKey]"
                    :class="{'is-active':vaildAvtive(item)}"
                    >

调用this.reload()方法，即可重新加载路由刷新页面。

open(item) {
      if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
      this.$router.$avueRouter.group = item.group;
      this.$router.push({
        path:  this.$router.$avueRouter.getPath({
          name: item[this.labelKey],
          src: item[this.pathKey]
        }),
        query: item.query,
      });
      this.reload();
    },