【求助】vue的子路由嵌套子路由，遇到的问题

Question

路由如下：

{
      path: '/',
      name: '首页',
      component: Layout,
      children:[
        { path: '/book', component: () => import('@/views/book'), name: 'book', hidden: true},
        { path: '/home', component: () => import('@/views/home'), name: 'home', hidden: true ,children:[
          { path: 'game', component: () => import('@/views/game'), name: 'game', hidden: true},
        ]},
        
      ]
    }

1、访问http://localhost:8080/#/home，是home页面

2、访问http://localhost:8080/#/book，是book页面

3、访问http://localhost:8080/#/home/game，还是home页面，怎么能到game页面上去？

{
      path: '/',
      name: '首页',
      component: Layout,
      children:[
        { path: '/book', component: () => import('@/views/book'), name: 'book', hidden: true},
        { path: '/home', component: () => import('@/views/home'), name: 'home', hidden: true},
        { path: '/home/game', component: () => import('@/views/game'), name: 'game', hidden: true}
      ]
    }

如果平级的话，可以实现，但不想用平级的，如果子路由嵌套的话，是怎么实现的？

Answer 1

在home.vue 里面放一个 <router-view/>