vue项目引用elementui侧边栏导航 后端返回路径数据 bus传参 侧边栏收缩展开其他页面echarts图实时刷新问题

图例：

<template>
  <div style="min-height: 900px">
    <el-menu
      :collapse="isCollapse"
      default-active="1"
      class="el-menu-vertical-demo menuStyl"
      active-text-color="#0b41cd"
      text-color="#303133"
    >
      <div
        :class="!isCollapse ? 'iconActive' : ''"
        class="iconStyls"
        @click="openChange"
      >
        <el-menu-item>
          <v-icon
            dark
            dense
            style="color: #303133"
            :style="{
              transform: isCollapse ? '' : 'rotate(180deg)',
            }"
            >mdi-wrap-disabled</v-icon
          >
        </el-menu-item>
      </div>
      <div v-for="(item, index) in leftMenuList" :key="index">
        <el-menu-item
          :index="item.link"
          v-if="item.secondItems.length <= 0"
          @click="doActionParent(item)"
          :class="nowUrlPath === item.link ? 'borderActive' : ''"
        >
          <v-icon
            dark
            left
            dense
            :style="{
              color: nowUrlPath === item.link ? '#0b41cd' : '#544F4F',
            }"
            >{{ item.imgUrl }}</v-icon
          >
          <span
            slot="title"
            :class="nowUrlPath === item.link ? 'nameActive' : ''"
            >{{ item.permissionName }}</span
          >
        </el-menu-item>
        <el-submenu
          :index="index + ''"
          class="subMenuStyl"
          :class="isCollapse ? 'subMenuStylIcon' : ''"
          v-if="item.secondItems.length > 0"
        >
          <template slot="title">
            <v-icon dark left dense color="#544F4F">{{ item.imgUrl }}</v-icon>
            <span v-show="!isCollapse">{{ item.permissionName }}</span>
          </template>
          <el-menu-item-group
            v-for="(item1, index1) in item.secondItems"
            :key="index1"
            @click.native="doActionChild(item1)"
          >
            <el-menu-item
              :index="item1.link"
              :class="nowUrlPath === item1.link ? 'borderActive' : ''"
              >{{ item1.permissionName }}</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'leftNav',
  components: {},
  created() {
    this.leftMenuList = window.myLeftMenuList.menuList
    this.persionList = window.myLeftMenuList.permissionCodeList
  },
  mounted() {
    this.nowUrlPath = window.location.pathname
  },
  data() {
    return {
      nowUrlPath: '',
      leftMenuList: [],
      persionList: [],
      isCollapse: true
    }
  },
  methods: {
    openChange() {
      this.isCollapse = !this.isCollapse
      this.bus.$emit('drawChange', this.isCollapse)
      //兄弟组件bus传参，该需求出现在侧边栏收缩后其他页面的echart图未刷新
    },
    doActionParent(operation) {
      this.nowUrlPath = operation.link
      if (window.location.pathname === operation.link) {
        return
      }
      if (operation.secondItems.length === 0) {
        this.$router.push(operation.link)
      } else {
        return
      }
    },
    doActionChild(operation) {
      this.nowUrlPath = operation.link
      if (window.location.pathname === operation.link) {
        return
      }
      this.$router.push(operation.link)
    }
  }
}
</script>

<style lang="less" scoped>
.iconStyls {
  cursor: pointer;
}
.iconActive {
  border-left: 4px solid #fff;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 900px;
}
.subMenuStyl {
  ::v-deep .el-menu {
    padding-left: 0px;
    background: #f8f8f8;
  }
}
.subMenuStylIcon {
  ::v-deep .el-submenu__icon-arrow {
    display: none;
  }
}
.borderActive {
  border-left: 4px solid #0063cf;
}
.nameActive {
  font-weight: 700;
}
.menuStyl {
  padding-left: 0px;
  text-align: left;
  position: relative;
}
</style>

兄弟组件bus传参，首先，在main.js中全局注册bus

//main.js
Vue.prototype.bus = new Vue()
//兄弟A页面写方法
this.bus.$emit('drawChange', this.isCollapse) //将状态this.isCollapse传入
//兄弟B页面接收
created() {
    this.bus.$on('drawChange', (res) => {
      this.drawFlag = res
    })
  },
watch: {
    'drawFlag'() {
      setTimeout(() => {
        this.myChart1.resize()  //兄弟B页面的echarts图根据侧边栏的收缩展开实时刷新
      }, 300)
    }
  },
data: () => ({
  drawFlag: true,
})

附加一段路由权限问题，以下代码与上述内容无关

router.beforeEach(async (to, from, next) => {
  const toPath = to.path,
    newPageList = window.myLeftMenuList.pageList || []
  if (toPath === '/') {
    next(`${newPageList[0]}`)
    return   //不return会导致路由无限循环
  }
  if (toPath === '/pageNoPermision') {
    next()
    return
  }
  if (newPageList.indexOf(toPath) < 0) {  //判断该路径是否包含在newPageList内
    next({ name: 'pageNoPermision' })
  } else {
    next()
  }
})


// 判断window.aaba是否是一个{}
if (Object.values(window.aaba).length > 0) {
      window.aaba不是一个{}
  }else{
      window.aaba是一个{}
}