@mrSeller

Как полностью разделить модули во Vue?

На проекте есть несколько ролей и для каждой есть свои разделы, не сообщающиеся с разделами других ролей.

Грубо говоря, роль 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.

Возможен ли вообще мой вариант разделения?
  • Вопрос задан
  • 253 просмотра
Решения вопроса 1
@mrSeller Автор вопроса
В общем, убрал корневой роут

В App.vue сделал <component :is="module"/>
И в этот компонент уже закидываю, в зависимости от роли, нужный модуль.
А в этом модуле уже регистрирую роуты модуля.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы