目录↑

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

By blockXun

解决方法: 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
    }]
}]

解决办法

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

  1. 新建一个页面,在页面中写
    <template>
     <router-view />
    </template>
    然后component: 上边那个页面
  2. 可以将component 写成component: {render: (e) => e("router-view")},