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

<template>
  <div
    class="ems-dashboard-editor-container ems-content-container-padding sbjk-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 + 'dzjkChildrenRoute'"
      >
        <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 sbjk-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 === "DzjkSbjk"
).children; //获取到单站监控-设备监控下面的字路由
console.log("设备监控子路由", childrenRoute);
export default {
  name: "DzjkSbjk",
  data() {
    return {
      childrenRoute,
      activeMenu: "",
    };
  },
  mounted() {
    console.log("当前设备监控页面路由", this.$route);
  },
};
</script>

<style scoped lang="scss">
.sbjk-ems-dashboard-editor-container {
  display: flex;
  background: #ffffff;
}
.sbjk-ems-content-container {
  margin-top: 0;
  padding-top: 0;
  padding-right: 0;
  flex: 1;
}
</style>