关于 router-view 三级路由没有切换出相应组件。

Question

首先先看一下原图，点击左侧一级导航路由出二级导航，点击二级导航出内容

<template>
<div id="app" class="clearfix">

<TopNavigationBar></TopNavigationBar> <!--原图红色区域-->
<div class="main">
  <SideNavigation></SideNavigation> <!--原图蓝色区域-->

  <div class="main-right">
    <router-view></router-view>   <!--原图绿色区域-->
    <router-view name="table"></router-view>  <!--原图黑色区域-->
  </div>
</div>

</div>
</template>
因为添加代码有点问题，所以这个是整个布局的代码截图，因为同时有两个两个视图，第二个试图加了name属性

routes: [{

        path: '/',
        name: 'login',
        component: ()=>import('@/views/login/login')
    },
    {
        path: '/layout',
        name: 'layout',
        // redirect: 'layout/TwoLevelHeadlines',
        component: ()=>import('@/views/layout/AppMain'),
        children: [{
            name: 'TwoLevelHeadlines',
            path: 'TwoLevelHeadlines',
            component: ()=>import('@/views/layout/TwoLevelHeadlines'),
            children: [{
                name: 'department',
                path: 'department',
                component: {
                    table: ()=>import('@/views/supplier/basicSettings/department')},
            }]
        }]
    }
]

这张是router的代码。先登陆再进入到layout，然后点击侧边的一级标题路由出二级标题，最后点击二级标题的时候路由出最后的内容，在三级路由中的component属性也给了router-view中的name值，找了好久也没找到问题

这边的url已经添加了department，但是组件没有出来，想问一下大佬是什么原因，是布局的问题还是router中的代码有问题

<template>
<div id="app">

<router-view></router-view>

</div>
</template>
这个是App.vue中的代码，不知道跟这里有没有关系

Answer 1

AppMain 组件内部 需要有router-view
PS: id=app重复了,不规范

Answer 2

楼主 解决了吗？