直接上效果圖，頂部導航選擇自動化測試，出現(xiàn)左側導航，左側導航選擇新建任務，這時候自動化測試也處于高亮狀態(tài)，并且刷新也會仍然選中，并且當我們打開自動化測試時，默認是選中第一個的，這時候我們可以設置默認子路由

image.png

一、 首先配置路由列表

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: login
    },
    {
      path: '/index',
      name: 'index',
      component: index,
      children: [
        {
          path: '/createPackage',
          name: 'createPackage',
          component: createPackage,
          meta: {
            activeMenu: '/createPackage'
          },
        },
        {
          path: '/packageList/:config_id',
          name: 'packageList',
          component: packageList,
          meta: {
            activeMenu: '/packageList/:config_id'
          },
        },
        {
          path: '/tagmanage',
          name: 'tagmanage',
          component: tagmanage,
          meta: {
            activeMenu: '/tagmanage'
          },
        },
        {
          path: '/tools',
          name: 'tools',
          component: tools,
          meta: {
            activeMenu: '/tools'
          },
        },
        {
          path: '/antomated-testing',
          name: 'antomated-testing',
          component: layout,
 redirect:'/antomated-testing/publish-task',
          meta: {
            activeMenu: '/antomated-testing'
          },
          children: [
            {
              path: '/antomated-testing/publish-task',
              name: 'antomated-publish-task',
              component: publishTask,
              meta: {
                activeMenu: '/antomated-testing', // 頂部導航 高亮
                ChildrenActiveMenu: '/antomated-testing/publish-task' // 子導航高亮
              }
            },
            {
              path: '/antomated-testing/task-list',
              name: 'antomated-task-list',
              component: taskList,
              meta: {
                activeMenu: '/antomated-testing', // 頂部導航 高亮
                ChildrenActiveMenu: '/antomated-testing/task-list' // 子導航高亮
              }
            },
          ]
        }
      ]
    },
  ]
})

二、配置頂部導航

 <el-menu
          :default-active="$route.meta.activeMenu"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
 <el-menu-item index="/antomated-testing">
         <router-link to="/antomated-testing" style="display:block;height:100%;">自動化測試</router-link>
</el-menu-item>
</el-menu>

三、配置左側導航欄，這邊就是主要用computed檢測這個數(shù)據(jù)，左側導航欄我使用了遞歸動態(tài)生成導航，不懂得可以看看我另一片文章http://www.itdecent.cn/p/6b34abeb6db7

 <el-menu
        router
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <Menu :menuList="LeftMenus"/>
</el-menu>

<script>
  import Menu from './menu'
  import menuList from "../../../config/menuConfig";

  export default {
    components: {Menu},
    name: "Layout",
    data() {
      return {
        LeftMenus: menuList
      }
    },
    computed: {
      activeMenu() {
        const route = this.$route
        console.log(route)
        const { meta, path } = route
        // if set path, the sidebar will highlight the path you set
        if (meta.ChildrenActiveMenu) { // 注意這里很重要
          return meta.ChildrenActiveMenu
        }
        return path
      }
    },
  }
</script>