spfm-market-front/src/pages/main/competitors/index.vue

<template>
  <div class="inner-container">
    <el-col :span="3"
      ><el-tabs
        tab-position="left"
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="(item, index) in routerList"
          :key="index"
          :name="item.path"
          :label="item.label"
        ></el-tab-pane>
      </el-tabs>
    </el-col>
    <el-col :span="21" style="background: #f4f4f4;">
      <div style="height: 100%">
        <router-view />
      </div>
    </el-col>
  </div>
</template>
<script>
import { userInfo } from 'os';

export default {
  data() {
    return {
      activeName: "",
      showList: [],
      routerList: [
        { label: "地市", path: "/competitors", name: "competitors" },
        // { label: "省公司", path: "/company", name: "company" }
      ],
    };
  },
  computed: {
    menuList: function () {
      let arr = [];
      this.routerList.map((item) => {
        this.showList.map((row) => {
          if (item.path == row) {
            arr.push(item);
          }
        });
      });
      return arr;
    },
  },
  methods: {
    handleClick(val) {
      console.log(val);
      if (this.$route.path != this.activeName) {
        this.$router.push(this.activeName);
      }
    },
  },
  mounted() {
    if(!JSON.parse(window.sessionStorage.getItem('userInfo')).cityName){
     this.routerList.push({ label: "省公司", path: "/company", name: "company" })
    }
    this.activeName = this.$route.path;
  },
  created() {
    JSON.parse(sessionStorage.childrenMenus).map((item) => {
      this.showList.push(item.jspUrl);
    });
  },
  watch: {
    $route(to, from) {
      this.activeName = this.$route.path;
    },
  },
};
</script>
<style>
.el-tabs__content {
  display: none;
}
</style>