How to setup vue-router with multiple children?

Question

Vue.js

I am using vue quasar framework
The link structure is like this
localhost:8080/settings/users/fields
localhost:8080/settings/users/views
localhost:8080/settings/users/actions
router

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') }
            ]
          },
        ]
      }
    ]
  }
]

in all parent components affixed

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

The problem is that when you go to settings/users or settings/users/fields, the stack is exceeded, i.e. looping, in short the browser hangs.

Answer 1

1. For nested routes, the path is written not from the root, but from the parent path
path: '/settings' => path: 'settings'
path: '/settings/users' => path: '/users'
path: '/settings/ users/fields' => path: '/fields'
2. It is better to replace redirects with the output of components
{ path: '', redirect: { name: 'users' } }, => { path: '', component: () => import('pages/settings/users/index.vue') },