Почему 2 раза выводится шаблон?

Question

[Sport-code]

Всем привет.

Подскажите пожалуйста, как убрать вывод второго шаблона

{
            path: '/admin',
            name: 'admin',
            component: () => import('../components/pages/admin/DashBoard'),
            redirect: { path: '/admin/category' },
            meta: {
                // layout: 'admin-layout',
                title: 'Админ панель',
                // requiresAuth: true
            },
            children: [
                {
                    path: 'category',
                    name: 'admin.category',
                    component: () => import('../components/pages/admin/Category'),
                    meta: {
                        title: 'Категория',
                        layout: 'admin-layout',
                        // requiresAuth: true
                    },
                }
            ]
        },

Comments

[Vitaliy]

без содержимого DashBoard и Category ничего нельзя сказать

[Sport-code]

Виталий Столяров, картинка ниже же приложена - это вывод.

[Sport-code]

Конкретно напишите, что нужно показать?

[Sport-code]

Category.vue

<template>
    <v-container>
        <v-layout row wrap>
            <v-flex xs12>
                <h1>Админ панель - Категории</h1>
            </v-flex>
        </v-layout>
    </v-container>
</template>

Dashboard.vue

<template>
<v-app id="keep">
    <v-navigation-drawer v-model="drawer" fixed clipped class="grey lighten-4" app>
        <v-list dense class="grey lighten-4">
            <template v-for="(item, i) in items">
                <v-layout v-if="item.heading" :key="i" row align-center>
                    <v-flex xs6>
                        <v-subheader v-if="item.heading">
                            {{ item.heading }}
                        </v-subheader>
                    </v-flex>
                    <v-flex xs6 class="text-xs-right">
                        <v-btn small flat>edit</v-btn>
                    </v-flex>
                </v-layout>
                <v-divider v-else-if="item.divider" :key="i" dark class="my-3"></v-divider>
                <v-list-tile v-else :key="i" ripple>
                    <v-list-tile-action>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-tile-action>
                    <v-list-tile-content>
                        <v-list-tile-title class="grey--text">
                            {{ item.text }}
                        </v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
            </template>
        </v-list>
    </v-navigation-drawer>
    <v-toolbar color="teal" dark app absolute clipped-left>
        <v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>
        <span class="title ml-3 mr-5">Админ&nbsp;<span class="font-weight-light">панель</span></span>
        <!-- <v-text-field solo-inverted flat hide-details label="Search" prepend-inner-icon="search"></v-text-field> -->
        <v-spacer></v-spacer>
    </v-toolbar>

    <v-content>
        <v-container fill-height class="grey lighten-4">
            <v-layout justify-center align-center>
                <v-flex>
                    <router-view />
                </v-flex>
            </v-layout>
        </v-container>
    </v-content>
</v-app>
</template>

[Sport-code]

Это у меня шаблон задает, если уберу будет пусто

[Sport-code]

App.vue

<template>
<v-app id="app">
    <transition name="fade" v-if="loading">
        <div id="loading">
            <div class="mx-auto" >
                <v-progress-circular :size="80" color="primary" indeterminate></v-progress-circular>
            </div>
        </div>
    </transition>

    <component :is="layout">
        <router-view />
    </component>

</v-app>
</template>

<script>
import DefaultLayout from './components/pages/shop/Navbar'
import AdminLayout from './components/pages/admin/DashBoard'

export default {
    name: 'App',
    components: {
        DefaultLayout,
        AdminLayout
    },
    data() {
        return {
            loading: true
        }
    }
}

[Sport-code]

Вот так сделал, я правильно понял?

{
            path: '/admin',
            component: {
                render (c) { return c('router-view') }
            },
            meta: {
                layout: 'admin-layout',
                title: 'Админ панель',
            },
            children: [
                {
                    path: 'category',
                    name: 'category',
                    component: () => import('../components/pages/admin/Category'),
                    meta: {
                        title: 'Категория',
                        layout: 'admin-layout',
                    },
                }
            ]
        }

[Sport-code]

component: {
                render (c) { return c('router-view') }
            }

Интересно, не подскажите что эта строчка делает?

[Sport-code]

Сделал так и добавил Products.vue

admin/ и
admin/products - работают

admin/category - не работает

{
            path: '/admin',
            component: {
                render (c) { return c('router-view') }
            },
            meta: {
                layout: 'admin-layout',
                title: 'Админ панель',
            },
            children: [
                {
                   path: '',
                   redirect: { path: '/admin/category' },
                 },
                {
                    path: 'category',
                    name: 'category',
                    component: () => import('../components/pages/admin/Category'),
                    meta: {
                        title: 'Категория',
                        layout: 'admin-layout',
                    },
                }
            ],
            children: [
                {
                    path: 'products',
                    name: 'products',
                    component: () => import('../components/pages/admin/Products'),
                    meta: {
                        title: 'Продукты',
                        layout: 'admin-layout',
                    },
                }
            ]
        },

[Sport-code]

это строчка заменят лишний родительский компонент для дочерних роутов:
component: 'some-component.vue'
some-component.vue:

Т.е - дочерние компоненты реализуют вложенность:

Спасибо за разъяснение

[Sport-code]

Спасибо большое за помощь!
Все работает!
Теперь нужно по разбираться )

[Sport-code]

Iglint, а можно еще узнать, если компонент (ссылку на компонент) я с БД загружаю (динамически).
Как это можно сделать? Подсказать можете?