<template>
<div>
<Menu>
<MenuItem v-for="item in items" @click="activeItem = item.name" :key="item.name"/>
</Menu>
<List>
<ListItem v-for="item in items" v-if="activeItem === item.name" :key="item.name">
<keep-alive> <!-- опционально -->
<component :is="item.component" />
</keep-alive>
</ListItem>
</List>
</div>
</template>
<script>export default {
components: {
ComponentName: () => import('@/components/ComponentName'), //dynamic import + built in prefetch
// other components
}
data: () => ({
activeItem: 'livingBuildings',
items: [
{
name: 'livingBuildings',
component: '', // имя компонента
},
]
}),
}
</script>
