How to completely separate modules in Vue?

Question

Vue.js

There are several roles on the project, and each has its own sections that do not communicate with sections of other roles.

Roughly speaking, the admin role has its own set of pages, the customer role has its own set of pages.

I want to completely separate the section of each role, including the router.
So that after authorization, the root component for all roles (Dashboard.vue) loads the required component through (components: Admin/index.vue and Customer/index.vue), which would already store routes and dynamically connected sections.

I threw in an approximate structure, which, as it seemed to me, should work:

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>

the root router contains only information about the route:

{
    path: '/',
    name: 'dashboard',
    component: () => import('@/views/Dashboard'),
  },

And what happens: when the root is opened, the widget is redirected as planned, but the widget component is not rendered (the Customer/index.vue component is rendered).
When /widget is opened, the rootmost App.vue component is opened, which contains only <router-view />, while the page is completely empty, i.e. <router-view />doesn't hit anything I

can't figure out why the widget component doesn't load when the root is opened and redirected to it, and why when the /widget link is followed, nothing is opened at all except the root App.vue.

Is my version of separation possible at all?

Answer 1

In general, I removed the root route . I did it in
App.vue. <component :is="module"/>
And I already throw the necessary module into this component, depending on the role.
And in this module I already register the module's routes.