关于命名路由跳转。

Question

新手，在router遇到了一些问题，自己研究着解决了很久没结局屌，想问一下大神命名路由的跳转问题。

<template>
  <div class="clearfix">
    <TopNavigationBar></TopNavigationBar> 
      <SideNavigation></SideNavigation> 
      <div class="main-right">
        <router-view name="SecondTitle"></router-view>
        <router-view name="table"></router-view>
      </div>
    </div>
  </div>
</template>
这是整个的布局文件，底部写入了两个router-view的标签，分别对应两个组件。一个是二级标题，
另一个是点击二级标题之后route出来的组件。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
这是根组件，app.vue文件，里面放了一个默认的router-view，首先在登录界面，然后router到首页，再由首页的小组件router出其他的组件。

routes: [
    {
        //登录页
        path: '/',
        name: 'login',
        component: ()=>import('@/views/login/login')
    },
    {
        //首页
        path: '/layout',
        name: 'layout',
        // redirect: 'layout/TwoLevelHeadlines',
        component: ()=>import('@/views/layout/AppMain'),
        children: [{
            //基础设置
            name: 'BasicSettingsTitle',
            path: 'BasicSettingsTitle',
            components: {
                SecondTitle: ()=>import('@/views/layout/SecondTitle/BasicSettingsTitle'),
            },
            //table内容
            children: [{
                name: 'department',
                path: 'department',
                components: {
                    table: ()=>import('@/views/supplier/basicSettings/department')
                }
            }]
        }

这是router的文件代码，写明了一些路径，到基础设置都是正常的，只有最后面的children中的组件无法被路由到

<el-menu-item index="/layout/BasicSettingsTitle/department">部门设置</el-menu-item>

这个是部门设置按钮的代码

页面url的地址已经更新，但是没有刷出组件来，找了很久没找到问题，想请大神们帮忙看一下哪里有问题

Answer 1

你的SecondTitle跟table2个router-view是同级的，但是把table渲染在SecondTitle的children里面肯定出不来啊，除非SecondTitle渲染出来的组件里面也有个name=table的router-view
如果你一定要把他们当成同级的，大概是这样写的，没实测，体会一下代码意思自己改

{
  //首页
  path: '/layout',
  name: 'layout',
  // redirect: 'layout/TwoLevelHeadlines',
  component: () => import('@/views/layout/AppMain'),
  children: [
    //部门设置
    {
      name: 'department',
      path: 'BasicSettingsTitle/department',
      components: {
        SecondTitle: () => import('@/views/layout/SecondTitle/BasicSettingsTitle'),
        table: () => import('@/views/supplier/basicSettings/department')
      }
    },
    //用户管理
    {
      name: 'userment',
      path: 'BasicSettingsTitle/userment',
      components: {
        SecondTitle: () => import('@/views/layout/SecondTitle/BasicSettingsTitle'),
        table: () => import('@/views/supplier/basicSettings/userment')
      }
    },
  ]
}