Глубокие вложенные маршруты и рендеринг различных компонентов на основе маршрута - PullRequest
Новая
       10

Глубокие вложенные маршруты и рендеринг различных компонентов на основе маршрута

0 голосов
/ 31 октября 2019

У меня есть глубокие вложенные маршруты в моем файле rout.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
}

Или вы видите, есть ли возможность сделать это совершенно другим способом?

Если вам нужна дополнительная информация, пожалуйста, дайте мне знать, и я предоставлю. Спасибо!

1 Ответ

1 голос
/ 31 октября 2019

Вы можете создать другой .vue -файл и включить в него оба компонента (<cmp-1 /> & <cmp2 />). Затем вы можете создать ваше if -статирование внутри шаблона с помощью другого template -tag: 

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

If зависит от вашего маршрута.

...