VUE 多级菜单，路由变了页面内容没变

Question

需求是这样的：

分为顶部1级菜单，和左侧2,3级菜单，点击顶部菜单左侧会联动

点击1,2,3每级菜单页面都会跟着变，

例如点击监控系统1级菜单，就会默认进入冷站页面

现在顶部菜单是没有问题的，就是2,3级出现问题了，谢谢大神指导，刚刚注册没有C币，可加微信发红包，谢谢了

//index.js

let routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/',
    component: Main,
    children: [{
      path: '/monitor/cold',
      component: Cold,
      iconCls: 'fa fa-home fa-fw',
      name: '系统监控',
      children: [
        {
          path: '/monitor/cold',
          component: Cold,
          iconCls: '/static/menu/ba.png',
          name: '楼宇自控',
          children: [
            {
              path: '/monitor/cold',
              component: Cold,
              iconCls: '/static/menu/ba.png',
              name: '冷站'
            },
            {
              path: '/monitor/ahu',
              component: Ahu,
              iconCls: '/static/menu/fire.png',
              name: '组合式空调'
            }
          ]
        },
        {
          path: '/monitor/fire',
          component: Fire,
          iconCls: '/static/menu/fire.png',
          name: '消防监控',
          children:[]
        },
        {
          path: '/monitor/door',
          component: Door,
          iconCls: '/static/menu/mj.png',
          name: '门禁监控',
          children:[]
        }
      ]
    }]
  },
    //后面还有很多123级菜单，省略
]

//Main.vue

<template>
  <section>
    <el-container class="container">
        <!--页眉-->
        <el-header class="header">
          <el-row>
            <el-menu :default-active="$route.path" class="menu-ul" mode="horizontal" @select="handleSelect" background-color="#06283C" text-color="#fff" active-text-color="#ffd04b" >
              <template v-for="(item,index) in menus">
                <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" @click="initLeftMenu(child)" style="width:120px;"><i :class="child.iconCls" style="margin-left: -20px;margin-right: 10px;"></i>{{child.name}}</el-menu-item>
              </template>
            </el-menu>
          </el-row>
        </el-header>

        <el-container>
          <el-aside class="left-aside" width="50px" v-show="$route.path != '/home'">
            <el-menu v-show="$route.path.indexOf('monitor') > 0" default-active="1-2" class="el-menu-left" :collapse="true">
              <template v-for="(item,index) in leftMenus">
                <!--如果有3级菜单-->
                <el-submenu v-if="item.children.length > 0" :index="item.path" :key="item.path" @click="$router.push(item.path)">
                  <template slot="title">
                    <img :src="item.iconCls"/>
                  </template>
                  <el-menu-item-group v-if="item.children != null && item.children != '' && item.children != []">
                    <span slot="title">{{item.name}}</span>
                    <el-menu-item v-for="children in item.children" :index="children.path" :key="children.path" @click="$router.push(children.path)" style="width:120px;padding-left: 20px !important;"><i :class="children.iconCls" style="margin-left: -20px;margin-right: 10px;"></i>{{children.name}}</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <!--如果没有3级菜单-->
                <el-menu-item v-if="item.children.length == 0" :index="item.path" :key="item.path" @click="$router.push(item.path)">
                  <img :src="item.iconCls"/>
                </el-menu-item>
              </template>
            </el-menu>
          </el-aside>
          <el-main class="main">
            <transition name="fade" mode="out-in">
              <router-view></router-view>
            </transition>
          </el-main>
        </el-container>
    </el-container>
  </section>
</template>


 let data = () => {
    return {
      menus: [],//顶部一级
      leftMenus:[]//左侧23级
    }
  }

//点击顶部1级菜单联动事件

  let initLeftMenu = function (child) {
    this.$router.push(child.path)
    this.leftMenus = child.children
  }

Answer 1

如果是父子嵌套路由，而且你只有一个路由视图，所有要全部写成同级的，不要嵌套着写