Vue一个页面多个路由，每个路由下面又有子路由，请问Router该怎么写？

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home'
import Menu from '@/components/menu'
Vue.use(Router)

const routes = [
    {
        path: '/home',
        name: 'home',
        components: {
            default:Home,
            menu:Menu
        }
    }
];
const router = new Router({
    mode:"history",
    routes
});

export default router

App.vue

<template>
            <div id="app">
             <router-view name="menu" ></router-view>
             <router-view />
                <button @click="clickFn1">按钮1</button>

                <button @click="clickFn2">按钮2</button>
            </div>
</template>

如上所示，假如我点击 按钮1，想让name="menu" 这个路由改变，但是
另一个不变，该怎么操作？
希望的结果是 Url 路径变成 xxx.com/home/list ， 就是在home路径下再加
一个children ，单路由的话是这么写

{
        path: '/home',
        name: 'home',
        component: Home,
        children:[
                {
                        path:"list",
                        component:xxx
                }
        ]
    }

但是多路由怎么写，还请大神指点！

自己也在这个问题上纠结了一会，最后解决了，虽然过去有点久了，还是回答下，为后面的朋友指个路

router-view：

解析：注意router-view中的name属性，这个就是后面用来识别路由出口的

<div class="grid-content bg-purple-light">
    <router-view name="table"></router-view>
    <router-view name="form"></router-view>
</div>

路由：

解析：使用components可以让一个映射为多个出口输出

import Table from './views/Table.vue';
import Form from './views/Form.vue';

Vue.use(VueRouter);

export default new VueRouter({
    routes: [{
        path: '/table',
        components: {
            //这里的属性名就是和上面router-view中配置的name相对应的，为各个router-view映射相应的路由组件
            table: Table,
            form: Form
        }
    }, {
        path: '/form',
        components: {
            form: Form
        }
    }]
});

chidren 下面的
如果你希望的结果是 Url 路径变成 xxx.com/home/list
那么path:/home/list

不要理所当然的子路由会带上父路由的路径，还得是完整的访问url

嵌套路由。
例如App里面

在Home里面

Home嵌套其他子组件即可。

我想问一下，如上楼上的
import Table from './views/Table.vue';
import Form from './views/Form.vue';

Vue.use(VueRouter);

export default new VueRouter({
routes: [{
path: '/table',
components: {
//这里的属性名就是和上面router-view中配置的name相对应的，为各个router-view映射相应的路由组件
table: Table, 如果我这里还有子路由呢？》？又该如何去写呀？
form: Form 如果我这里还有子路由呢？》？又该如何去写呀？
}
}, {
path: '/form',
components: {
form: Form 如果我这里还有子路由呢？》？又该如何去写呀？
}
}]
});

下面这个图就是我想要的结果 了， 如果你不了解的话可以加我微信的，156456538
我就是想要这样的结果 ，但是想尽了办法也没有去实现的了，
考虑过现在网上流行那个多标签的方法，但是呢，没用。
他们始终也是一个窗口显示 ，没有做到多窗口。即就是他们同一时间只能显示 一个标签。图片说明