vue-router嵌套路由中无父级组件的设置方法

解决方法： component: {render: (e) => e("router-view")},

需求

在一些情况下，会有设置二级路由，但一级路由不需要 component 的特殊需求

比如我在data路由下需要List页.../#/data/list，shop页.../#/data/shop 等，但每一个页面中没有任何相同的地方，也就是在.../#/data路由下不需要component

如下路由

[{
    path: '/data',
    name: 'data',
    meta: {
        name: 'data页',
        auth: true,
        icon: 'icon-account'
    },
    component: Data, // 需求是这里引入为空，但children中的component还会有东西
    children: [{
        path: 'list',
        name: 'list',
        meta: {
            name: '列表页',
            auth: true
        },
        component: List,
    }, {
        path: 'shop',
        name: 'shop',
        meta: {
            name: '商店页',
            auth: true
        },
        component: Shop
    }, {
        path: 'detail',
        name: 'detail',
        meta: {
            name: '查看',
            auth: true
        },
        component: Detail
    }]
}]

解决办法

目前只找到这两种解决办法，没有找到不写component的方法

在/data中，如果不写component 属性,子集的component也不会显示

1. 新建一个页面，在页面中写

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

然后component: 上边那个页面

2. 可以将component 写成component: {render: (e) => e("router-view")},