vue-router嵌套问题

Question

/bgManagement/monitorBallPdt对应的页面中的<router-view>未匹配到，页面显示为空，主要代码如下：

App.vue

<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<style lang="less">
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  #app {
    width: 100%;
    height: 100%;
  }
}
</style>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import index from '../views/index.vue'
import gisPlatform from '../views/gisPlatform.vue'
import bgManagement from "@/views/bgManagement/index"
import monitorBallPdt from "@/views/bgManagement/monitorBallPdt/monitorBallPdt"
import monitorPolice from "@/views/bgManagement/monitorPolice/monitorPolice"

Vue.use(Router)

export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'index',
      components: {
        default: index
      }
    },
    {
      path: '/gisPlatform',
      name: 'gisPlatform',
      components: {
        default: gisPlatform
      }
    },
    {
      path: '/bgManagement/monitorBallPdt',
      name: 'bgManagement',
      components: {
        default: bgManagement,
        "management": monitorBallPdt
      }
    },
    {
      path: '/bgManagement/monitorPolice',
      name: 'monitorPolice',
      components: {
        default: bgManagement,
        "management": monitorPolice
      }
    }
  ]
})

bgManagement/index.vue

<template>
    <div id="bgm">
        <el-container style="height: 100%;">
            <el-header style="background-color:#252525;">
                <banner></banner>
            </el-header>
            <el-container>
                <el-aside width="200px" style="background-color: #35373F;">
                    <el-menu
                        :default-active="indexActive"
                        @select="select"
                        class="el-menu-vertical-demo"
                        background-color="#35373F"
                        text-color="#fff"
                        active-text-color="#fff"
                        :router="true"
                    >
                        <el-menu-item index="/bgManagement/monitorBallPdt">
                            <i class="iconfont iconerji-yingyonggailan"></i>
                            <span slot="title">绑定人员</span>
                        </el-menu-item>
                        <el-menu-item index="/bgManagement/monitorPolice">
                            <i class="iconfont iconerji-yingyonggailan"></i>
                            <span slot="title">绑定设备</span>
                        </el-menu-item>

                    </el-menu>
                </el-aside>
                <el-main>
                    <keep-alive>
                        <router-view name="management"></router-view>
                    </keep-alive>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import banner from './banner'

export default {
    data(){
        return {
            indexActive: '/bgManagement/monitorBallPdt'
        }
    },
    components: {
        banner
    },
    methods: {
        
    }
}
</script>

<style lang="less" scope>
#bgm{
    width: 100%;
    height: 100%;
    .is-active{
        background-color: #009688 !important;
    }
}
</style>

Answer 1

你这写的都是同级路由，怎么会嵌套呢？

{
  path: '/bgManagement',
  name: 'bgManagement',
  components: {
    default: bgManagement,
  },
  children: [
    {
      path: '/bgManagement/monitorBallPdt',
      name: 'monitorBallPdt',
      components: {
        'management': monitorBallPdt,
      },
    },
    {
      path: '/bgManagement/monitorPolice',
      name: 'monitorPolice',
      components: {
        'management': monitorPolice,
      },
    },
  ],
},

试下这样写