this is the home page with the highlight

Home.vue file introduces the left menu component

<template>
  <div class="home">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="4"><div class="f18 white"></div></el-col>
          <el-col :span="16">
            <el-menu
              :default-active="$route.path"
              mode="horizontal"
              @select="handleSelect"
              background-color="-sharp1f2d3d"
              text-color="-sharpfff"
              active-text-color="-sharpffd04b" router>
              <el-menu-item index="/Table"></el-menu-item>
              <el-submenu index="2">
                <template slot="title"></template>
                <el-menu-item index="/Form">1</el-menu-item>
                <el-menu-item index="2-2">2</el-menu-item>
                <el-menu-item index="2-3">3</el-menu-item>
                <el-submenu index="2-4">
                  <template slot="title">4</template>
                  <el-menu-item index="2-4-1">1</el-menu-item>
                  <el-menu-item index="2-4-2">2</el-menu-item>
                  <el-menu-item index="2-4-3">3</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-menu-item index="/User"></el-menu-item>
              <el-menu-item index="4"><a href="-sharp" target="_blank"></a></el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="4" class="text-r">
            <el-dropdown class="f12 white">
              <span class="el-dropdown-link">
                admin<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item class="f12"></el-dropdown-item>
                <el-dropdown-item class="f12"></el-dropdown-item>
                <el-dropdown-item divided class="f12"><router-link to="/"></router-link></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside>
            <leftMenu ref="leftMenu"></leftMenu>
        </el-aside>
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right" class="mb20">
            <el-breadcrumb-item :to="{ path: "/" }"></el-breadcrumb-item>
            <el-breadcrumb-item></el-breadcrumb-item>
            <el-breadcrumb-item></el-breadcrumb-item>
            <el-breadcrumb-item></el-breadcrumb-item>
          </el-breadcrumb>
          <transition name="fade" mode="out-in" appear>
            <router-view></router-view>
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import LeftMenu from "./common/LeftMenu.vue"
export default {
  name: "Home",
  data () {
    return {
      
    }
  },
  components: {
    LeftMenu
  },
  methods: {
    handleSelect (key, keyPath) {
      this.$refs.leftMenu.getMenu(key) // LeftMenu
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.el-breadcrumb{
  font-size:12px;
}
.fade-enter-active,.fade-leave-active{
transition: opacity .5s
}
.fade-enter,.fade-leave-active{
opacity: 0;
}
</style>

LeftMenu.vue

<template>
    <el-menu class="left-menu" :default-active="$route.path" background-color="-sharp324057" text-color="-sharpfff" :collapse="isCollapse" router>
      <template v-for="secMenu in menuData">
        <el-submenu index="1" class="submenu-title" :key="secMenu.id" v-if="secMenu.list">
            <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">{{secMenu.submenu}}</span>
            </template>
            <el-menu-item :index="subItem.path" v-for="subItem in secMenu.list" :key="subItem.id">{{subItem.menu}}</el-menu-item>
        </el-submenu>
        <el-menu-item :index="secMenu.path" :key="secMenu.id" v-else>
            <i class="el-icon-menu"></i>
            <span slot="title">{{secMenu.menu}}</span>
        </el-menu-item>
      </template>
    </el-menu>
</template>
<script>
export default {
  name: "LeftMenu",
  props: ["activeIndex"],
  data () {
    return {
      isCollapse: false,
      menuData: []
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(this.$store.state.navSelected)
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    getMenu (key) {
      // console.log(key)
      if (key === "/Table") {
        this.menuData = [

          {
            menu: "11",
            path: "/Table",
            id: 1
          }
        ]
      } else if (key === "/Form") {
        this.menuData = [
          {
            menu: "1",
            path: "/Form",
            id: 1
          },
          {
            menu: "2",
            path: "/Table",
            id: 2
          }
        ]
      } else {
        this.menuData = [

          {
            menu: "1",
            path: "/User",
            id: 1
          },
          {
            menu: "2",
            path: "/Table",
            id: 2
          }
        ]
      }

    }
  },
  created () {
    const curPathName = this.$router.history.current.name
    // console.log(curPathName)
    this.getMenu("/" + curPathName)
    this.activeIndex = "/" + curPathName
    this.$router.push(curPathName)
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.el-menu-item{
    width:200px;
    height: 40px;
    line-height: 40px;
    font-size:12px;
}
</style>

routing profile

import Vue from "vue"
import Router from "vue-router"
import Home from "@/components/Home"
import Table from "@/components/Table"
import Form from "@/components/Form"
import Login from "@/components/Login"
import User from "@/components/User"
Vue.use(Router)
const routes = [
  {
    path: "/",
    redirect: "/Login"
  },
  {
    path: "/Login",
    component: Login
  },
  {
    path: "/Home",
    component: Home,
    redirect: "/Table",
    children: [
      { path: "/Table", component: Table, name: "Table" },
      { path: "/Form", component: Form, name: "Form" }
    ]
  },
  {
    path: "/Home",
    name: "Home",
    component: Home,
    children: [
      //  /user/:id/profile 
      // UserProfile  Home  <router-view> 
      { path: "/User", component: User, name: "User" }
    ]
  }
]
export default new Router({
  // mode: "history", // -sharp
  routes
})

how to toggle the top menu and highlight the left menu, please advise