Question

我的route.js文件中有深层嵌套的路由。如您在下面的代码中所见，我必须根据路由来渲染不同的组件（如果路由是产品，则需要渲染Products.vue组件，但是如果路由更深，则需要渲染包含模板{{1的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:   '*'
            }
        },
        ....
    ]
}

还是您看到是否有可能完全通过其他方式做到这一点？

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

Answer 1

您可以创建另一个development文件，并将两个组件都包含在内（.vue和<cmp-1 />）中。然后，您可以使用另一个<cmp2 />标签在模板中构建if语句：

template

if是否取决于您的路线。

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

1 个答案: