时间戳

首页 > 解决方案 > 基于路由路径的深层嵌套路由和不同组件渲染

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

问题描述

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

{
    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
}

或者你看看是否有可能完全以其他方式做到这一点？

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

标签： javascriptvue.jsvuejs2quasar-framework

解决方案

您可以创建另一个.vue-file 并在 ( <cmp-1 />& <cmp2 />) 中包含两个组件。然后您可以使用另一个-tagif在模板内构建您的-statement ：template

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

if 取决于您的路线。

推荐阅读