Utworzenie osobnego URL dla części aplikacji

Używam VUE 2 oraz Quasar 1. W aplikacji WEB-owej mam logowanie po mailu po stronie frontu i backendu. Moja aplikacja składa się z klocków, coś na kształt windows phone. Każdy klocek to tak na prawdę button posiadający ikonę oraz nazwę. Pierwszy to pracownicy (lista wszystkich pracowników), drugi to dokumenty (lista wszystkich dokumentów) a trzeci to maszyny (lista wszystkich maszyn). pages/Index to główny wygląd aplikacji, tu są wyświetlane klocki.

Wygląda to tak:

computed: {
  moduleButtons: {
        get() {
          return [
            {
              title: 'pracownicy',
              moduleId: 100,
              intent: '/app/pracownicy/main',
              loginType: 'prc',
              active: true,
              iconMain: 'fas fa-user'
            },
            {
              title: 'dokumenty',
              moduleId: 200,
              intent: '/app/dokumenty/main',
              loginType: 'prc',
              active: true,
              iconMain: 'fas fa-file'
            },
            {
              title: 'maszyny',
              moduleId: 300,
              intent: '/app/maszyny/main',
              loginType: 'prc',
              active: true,
              iconMain: 'fas fa-cash-register'
            },
        ]
    }}
}

Aktualnie klikam na któryś z powyższych kafelków i otwiera się okno logowania, gdzie wpisuję email pracownika oraz hasło. następnie na kliku buttona Zaloguj pobierana jest właściwość moduleId i metoda wie do którego klocka ma zalogować pracownika i wyświetla odpowiednie dane. Wszystko działa ale chciałem przenieść apke na poziom wyżej. Mianowice mam na szybko stworzoną dla testów stronę internetową a na niej button z szalonym opisem 'otwórz'. Kiedy go kliknę chcę, aby otworzyło się okno logowania do kafelka z pracownikami, ale to nie działa. Używa Vue Route. Oto używany kod:

const routes = [
  {
    path: '/login',
    component: () => import('pages/loginPanel)
  },
{
    path: '/',
    component: () => import('pages/Index')
  },
{
    path: '/app/pracownicy',
    component: () => import('layouts/pracownicy'),
    children: [
      {
        path: 'main',
        component: () => import('pages/pracownicy/mainPrc')
      },
      {
        path: 'pracownik',
        component: () => import('pages/pracownicy/pracownik')
      }
    ]
  },
{
    path: '/app/dokumenty',
    component: () => import('layouts/dokumenty'),
    children: [
      {
        path: 'main',
        component: () => import('pages/documents/mainDok')
      },
      {
        path: 'przyjecie_zew',
        component: () => import('pages/documents/PZ')
      },
      {
        path: 'wydanie_zew',
        component: () => import('pages/documents/WZ')
      }
    ]
  },
{
    path: '/app/maszyny',
    component: () => import('layouts/maszyny'),
    children: [
      {
        path: 'main',
        component: () => import('pages/maszyny/details')
      }
    ]
  },
]

Nie wiem jak to ogarnąć, próbowałem PWA oraz ServiceWorker ale jedne błędy były zastępowane kolejnymi błędami. Próbowałem także w taki sposób:

{
    path: '/testLoginu',
    redirect: '/login'
  },

Niestety nie wiem jak to ugryźć. Jeśli ktoś wie, proszę o dawkę kodu albo chociaż informację, jak się powinienem za to zabrać. Z góry dziękuję