Как настроить vue-router с несколькими children?

Question

[NiceScript]

Использую vue quasar framework
Структура ссылок такая
localhost:8080/settings/users/fields
localhost:8080/settings/users/views
localhost:8080/settings/users/actions

роутер

const routes = [
  {
    path: '/',
    component: () => import('layouts/MyLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      {
        path: '/settings',
        component: () => import('pages/settings/index.vue'),
        children: [
          { path: '', redirect: { name: 'users' } },
          {
            path: '/settings/users',
            name: 'users',
            component: () => import('pages/settings/users/index.vue'),
            children: [
              { path: '', redirect: '/settings/users/fields' },
              { path: '/settings/users/fields', name: 'users_fields', component: () => import('pages/settings/users/fields/index.vue') },
              { path: '/settings/users/views', name: 'users_views', component: () => import('pages/settings/users/views/index.vue') },
              { path: '/settings/users/actions', name: 'users_actions', component: () => import('pages/settings/users/actions/index.vue') }
            ]
          },
        ]
      }
    ]
  }
]

во всех родительских компонентах проставлен

<q-page-container>
   <router-view class="тут уникальные классы"> </router-view>
</q-page-container>

Проблема в том, что при переходе на settings/users или settings/users/fields происходит превышение стека, т.е. зацикливание, короч браузер виснит.

Answer 1

[Владимир Сартаков]

1. У вложеных роутов path не от корня пишут, а от родительского path
path: '/settings' => path: 'settings'
path: '/settings/users' => path: '/users'
path: '/settings/users/fields' => path: '/fields'

2. Редиректы лучше заменить, на вывод компонентов
{ path: '', redirect: { name: 'users' } }, => { path: '', component: () => import('pages/settings/users/index.vue') },