javascript - 深度嵌套路由和不同组件渲染，基于路由路径

Question

我的routes.js 文件中有深层嵌套的路由。正如您在下面的代码中看到的，我必须根据路线渲染不同的组件(如果路线是产品，我需要渲染 Products.vue 组件，但如果路线更深入，我需要渲染包含模板 <router-view></router-view> 的 EmptyRouterView.vue 组件)这样我就可以渲染子路由组件)。

{
    path: '/products',
    name: 'products',
    component: {
        render(c) {
            if (this.$route.name === 'products') {
                return c(require('pages/Products/Products.vue').default)
            } else {
                return c(require('components/EmptyRouterView.vue').default);
            }
        }
    },
    meta: {
        requiresAuth: true,
        allowedPositions: '*'
    },
    children: [
        // Scan product to get info
        {
            path: '/products/search-product',
            name: 'search-product',
            component: () => import('pages/Products/SearchProduct.vue'),
            meta: {
                requiresAuth: true,
                allowedPositions:   '*'
            }
        },
        ....
    ]
}

我想知道是否有一些简短或更好的方法可以做到这一点？例如(我知道我不能在箭头函数中调用它)这样的东西？

component: () => {
    this.$route.name === 'products' ? require('pages/Products/Products.vue').default : require('components/EmptyRouterView.vue').default
}

或者您认为是否有可能以完全其他的方式做到这一点？

如果您需要任何其他信息，请告诉我，我会提供。谢谢!

Answer 1

您可以创建另一个 .vue -file 并将两个组件包含在其中( <cmp-1 /> 和 <cmp2 /> )。然后你就可以构建你的 if -模板内的语句与另一个 template -标签:

<template v-if="boolean">
<cmp-1 />
</template>
<template v-else>
<cmp-2 />
</template>

if 取决于您的路线 then。