{
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',
},
}
]
},{
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',
},
}
]
}<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
}
}
}<template>
<v-container>
<v-layout row wrap>
<v-flex xs12>
<h1>Админ панель - Категории</h1>
</v-flex>
</v-layout>
</v-container>
</template><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">Админ <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>
Спасибо за разъяснение