src/views/service.vue

<template>
  <div >
    <el-container style="min-height: 550px">
      <!--<el-aside width="210px" style="background-color: rgb(84, 92, 100);">-->
      <el-aside width="210px" style="background-color: rgb(84, 92, 100);">
        <!--左侧菜单组件-->
        <el-menu
          :default-active="isId"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @open="handleOpen"
          @close="handleClose"
          @select="handleSelect"
          :default-openeds="openeds" unique-opened router>
          <NavMenu :navMenus="totalList"></NavMenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main class="app-container">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  import config from '../components/config'
  import NavMenu from '../components/NavMenu';
  export default {
    name: 'service',
    data(){
      return {
        tagsList: [],
        collapse: false,
        totalList:[],
        isId:"first",
        openeds:["first"],
      }
    },
    components:{
       NavMenu
    },
    beforeRouteEnter (to, from, next) {
      console.log("我从==哪里来",to)
      var self = this
      next(vm=>{
        console.log(to)
        vm.isId = to.path.replace('/','');
      })
    },
    methods: {
      handleSelect(key,keyPath){
        console.log("=======",key,keyPath);
      },
      handleOpen(){
      },
      handleClose(){
      }
    },
    watch:{
      $route(to,from){
        this.isId = to.path.replace('/','');
      }
    },
    created(){
      this.totalList = config.childs
    },
  }
</script>
<style scoped>
</style>