На проекте есть несколько ролей и для каждой есть свои разделы, не сообщающиеся с разделами других ролей.
Грубо говоря, роль admin имеет свой набор страниц, роль customer имеет свой набор страниц.
Я хочу отделить полностью раздел каждой роли, в том числе роутер.
Так, чтобы после авторизации корневой для всех ролей компонент (Dashboard.vue) подгружал нужный компонент через (компоненты: Admin/index.vue и Customer/index.vue), в которых бы уже и хранились роуты и динамически подключаемые разделы.
Я накидал примерную структуру, которая, как мне казалось, должна работать:
Dashboard.vue:
<template>
<div>
<component :is="module" />
</div>
</template>
<script>
export default {
computed: {
module ({ role }) {
if (role === 'admin') {
return () => import('@/views/Dashboard/Admin')
}
if (role === 'customer') {
return () => import('@/views/Dashboard/Customer')
}
return null
}
},
}
</script>
Customer/index.vue
<template>
<div>
<router-view />
</div>
</template>
<script>
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)
export default {
router: new VueRouter({
base: '/',
mode: 'history',
routes: [
{
path: '/',
redirect: { name: 'widget' },
children: [
{
path: 'widget',
name: 'widget',
component: () => import('@/views/Dashboard/Customer/CustomerWidget'),
},
],
},
],
}),
}
</script>
корневой router содержит в себе только информацию о роуте:
{
path: '/',
name: 'dashboard',
component: () => import('@/views/Dashboard'),
},
И что происходит: при открытии корня идет редирект на widget, как и планировалось, но компонент виджета не отрисовывается (компонент Customer/index.vue отрисовывается).
При открытии /widget открывается самый корневой компонент App.vue, который содержит только
<router-view />, при этом страница абсолютно пустая, т.е. в
<router-view /> ничего не попадает
Не могу понять, почему не прогружается компонент виджета при открытии корня и редиректе на него, и почему при переходе по ссылке /widget не открывается вообще ничего, кроме корневого App.vue.
Возможен ли вообще мой вариант разделения?
