emsfront/src/views/ems/dzjk/tjbb/index.vue

<template>
  <div class="ems-dashboard-editor-container ems-third-menu-container">
    <el-menu
      class="ems-third-menu"
      :default-active="$route.name"
      background-color="#ffffff"
      text-color="#666666"
      active-text-color="#ffffff"
    >
      <el-menu-item
        :index="item.name"
        v-for="(item, index) in childrenRoute"
        :key="index + 'tjbbChildrenRoute'"
      >
        <router-link
          style="height: 100%; width: 100%; display: block"
          :to="{ path: item.path, query: $route.query }"
        >
          {{ item.meta.title }}
        </router-link>
      </el-menu-item>
    </el-menu>

    <div
      class="ems-content-container ems-content-container-padding tjbb-ems-content-container"
    >
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import { dzjk } from "@/router/ems";
const childrenRoute = dzjk[0].children.find(
  (item) => item.name === "DzjkTjbb"
).children; //获取到统计报表下面的字路由
console.log("设备监控子路由", childrenRoute);
export default {
  name: "DzjkTjbb",
  data() {
    return {
      childrenRoute,
      activeMenu: "",
    };
  },
  mounted() {
    console.log("当前统计报表页面路由", this.$route);
  },
};
</script>

<style scoped lang="scss">
.tjbb-ems-content-container {
  margin-top: 0;
  padding-top: 0;
  padding-right: 0;
  flex: 1;
}
</style>