【Vue-router】解决父级路由不需要 component的情况_vue3如何添加沒有组件的二级父路由

问题描述

后台系统页面中动态配置菜单，只有二级菜单有相应前端组件，一级菜单只是展示作用；
所以，出现 只设置二级路由，但一级路由不需要 component 的特殊需求；

看下页面展示：（移入一级菜单就弹出二级菜单，所以二级菜单才会有相对应的前端组件）

[{
    id:8,
    path: '/WryModule',
    name: '',
    meta: {
        title: '污染源在线监测'
    },
    component: '', //这里是空的情况
    systemTypeCode:'pollution',
    children: [
        {
            pid:8,
            path: '/WryModule/RealView',
            name: 'WryRealView',
            meta: {
                title: '实时一览'
            },
            component:'views/PageBigData/WryModule/RealView',
            systemTypeCode:'pollution',
        },
        {
            pid:8,
            path: '/WryModule/DataQuery',
            name: 'WryDataQuery',
            meta: {
                title: '数据查询'
            },
            component:'views/PageBigData/WryModule/DataQuery',
            systemTypeCode:'pollution',
        },
     ]
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

解决办法

将component 写成component: {render: (e) => e("router-view")}

实际应用

根据后台系统管理平台，配置好菜单/路由数据结构，动态生成路由；
注册component的时候判断 有无组件，没有组件的父级路由，就设置component：component: {render: (e) => e("router-view")}