Remixes
2019-07-23 10:39
采纳率: 100%
浏览 1.8k

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

需求是这样的:

分为顶部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
  }
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • 老铁咖啡 2019-07-26 15:30
    已采纳

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

    已采纳该答案
    打赏 评论
  • csdn_wpno1 2019-07-23 11:34

    leftMenus就是child吧,而不是child.children

    打赏 评论
  • KaSuo_ 2019-07-23 13:32

    路由是父子级,但视图只有一个?children写法是在一个路由视图页面内的子路由视图切换,如果只有一个视图就不要写成父子嵌套

    你可以试试在Cold组件里加一个

    <router-view></router-view>
    

    那才是现在这种写法的显示

    打赏 评论
  • LX_LR 2021-05-19 15:23

    显示菜单路由的地方

    <transition name="" mode="">

    <keep-alive>

    <router-view></router-view>

    </...></...>

    打赏 评论

相关推荐 更多相似问题