[JavaScript知识库]关于多级路由的配置

有时候我们配置路由js文件的时候，需要多级树形结构的配置；

这时候我们可以在view中创建对应的文件夹，同时准备一个index作为主节点的目的文件，使用<router-view />代表他的子级文件位置；

我们的主节点就指向index.vue

index内容欸

<template>
  <div>
    <router-view />
  </div>
</template>

其中<router-view />就带表着一个子级组件，复制两份就有两个，同样的，在其中也可以进行布局配置
比如

<template>
  <div style="padding:30px;">
    <el-alert :closable="false" title="menu 1">
      <router-view />
    </el-alert>
  </div>
</template>

然后路由配置中的子节点配置

 children: [
          {
            path: '/BUGLog/adminBugLog',
            component: () => import('@/views/log-and-bug/admin-bug'),
            name: 'adminBugLog',
            meta: {
              roles: ['admin', 'dev3'],
              title: '管理平台BUG告警日志[Admin Bug Log]',
              icon: 'bug', affix: false
            }
          }]

在children中各自指向自己的vue文件就可以了；

开始遇到的坑：
一开始给主节点指定的路由是其中一个子文件的路径，配置页面的时候一直没发现。直到配置完第二个的时候发现刷新不了；检查路径有问题，然后就尝试了不配置compants，发现页面是空白；；；然后尝试了直接引入组件，排版乱了，；；

然后就从模板里找了个案例结果发现有嵌套效果，尝试着把嵌套的div删除。建立了一个空div，并且删除了布局。。。勉强能用；

猜测：
如果使用有内容的index，那么每个子组件加载以后都会被index的内容包裹，，，那这个目录就不是简单的切换页面那样子，，，

确实存在引入；使用这个方法也只是外层内容为空而已，，加载的时候加载了主节点，然后根据加载的内容动态嵌套吗

还是。。切换哪个组件就渲染哪个组件，同时会检查有没有父级，有父级就一起渲染。。。。

为什么点击主节点的时候不会渲染主节点的内容呢，是因为有子节点而不会渲染吗，他在等待最终结果？也就是说我们选择的时候他等于在叠加，等到最终确认渲染路径的时候一起渲染？这个可以啊；；；；
当我们主节点是空的时候渲染出来就是我们想要的效果。。。。

算了不折腾了，以后直接空嵌套就好了

前端好难啊；