Ant Design Vue项目中的嵌套路由

项目需求如下：

主菜单下还需要个子菜单。
App.vue是我们的主组件，所有的页面都在App.vue下进行切换。我们可以将router标示为App.vue的子组件。
也就是说App.vue中的就是主菜单，项目要求是点击主菜单的某一项时显示出的页面也含菜单且右侧内容根据左侧菜单切换而改变内容。
所以router.js文件如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import BaseLayout from '@/components/layout/BaseLayout'
import ServerLayout from '@/components/layout/ServerLayout'

Vue.use(VueRouter)



const routes = [
    {
        path: '/',
        component: BaseLayout,
        children: [
            {
                path: 'index/index',
                component: () => import('@/views/Home')
            }
            {
                path: '/serverList',
                component: ServerLayout,
                redirect: '/serverList/test1',
                children: [
                    {
                        path: '/serverList/order',
                        component: () => import('@/views/serverList/test1')
                    },
                    {
                        path: '/serverList/proposer',
                        component: () => import('@/views/serverList/test2')
                    },
                ]
            }
        ]
    },

]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

其中BaseLayout 就是我们引入的主菜单，ServerLayout就是引入的子菜单
BaseLayout.vue：

<template>
	<Header @click="toServerLayout"></header>
	<div class="main">
		<router-view></router-view>
	</div>
</template>
<script>
    export default {
        name: "Header",
        data() {
            return {}
        },
        methods: {
            toServerLayout() {
                this.$router.push({
                    path: '/serverList/test1'
                });
            },   
        }
    }
</script>

ServerLayout.vue:

<template>
    <div style="height: calc(100vh - 117px);display: flex;">
        <!--左侧menu-->
        <div class="leftMenu">
            <p class="title">菜单标题 </p>
            <a-menu
                    style="width: 256px"
                    :defaultSelectedKeys="['1']"
                    :defaultOpenKeys="['sub1']"
                    :mode="mode"
                    :theme="theme"
            >
                <a-menu-item v-for="item in menuArr" :key="item.key">
                    <router-link :to="item.path">{
   
   {item.name}}</router-link>
                </a-menu-item>
            </a-menu>
        </div>
       <!--右侧部分-->
        <div class="rightContent">
           <router-view></router-view>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                mode: 'inline',
                theme: 'light',

                menuArr: [
                    {
                        key: '1',
                        name: 'menu菜单1',
                        path: '/serverList/test1',
                    },
                    {
                        key: '2',
                        name: 'menu菜单2',
                        path: '/serverList/test2',
                    },
                ]
            };
        },
    };
</script>