关于多级路由的配置

43 篇文章 4 订阅
31 篇文章 0 订阅

有时候我们配置路由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的内容包裹,,,那这个目录就不是简单的切换页面那样子,,,

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

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

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

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

前端好难啊;

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值
>