Детский маршрут не отображается в vuejs

Question

Детский маршрут не отображается в vuejs.

При доступе к дочернему маршруту отображается материнский маршрут. Что я делаю не так?

{
    path: '/portaria',
    name: 'portaria',
    component: Portaria,
    meta: {
        auth: true,
        layout: layouts.navTop,
        tipo: 'portaria'
    },
    children: [
        {   path: 'create',
            name: 'create',
            component: PortariaCreate,
            meta: {
                auth: true,
                layout: layouts.navTop
            }
        }
    ]
}

Answer 1

Ваш Portaria компонент должен содержать свой собственный <router-view>, чтобы дочерние маршрутизаторы отображались внутри.

Вложенные маршруты должны иметь совпадающие вложенные представления маршрутизатора.

App.vue
 - <router-view>
 Portaria.vue
   - <router-view>

Если вы это сделаете если вы не хотите, чтобы внутри были виды, то вы должны сгладить пути маршрутизатора.

const router = new Router({
  mode: 'history',
    //base: '/sub-path/',
    routes: [
      {
        path: '/',
        alias: '/dashboard',
        name: 'dashboard',
        component: Dashboard,
        meta: {
          auth: true,
          layout: layouts.navLeft,
          searchable: true
        }
      },
      {
        path: '/portaria',
        name: 'portaria',
        component: Portaria,
        meta: {
          auth: true,
          layout: layouts.navTop,
          tipo: 'portaria'
      },
      {   
        path: '/portaria/create',
        name: 'portaria-create',
        component: PortariaCreate,
        meta: {
          auth: true,
          layout: layouts.navTop
        }
      }
    ]
})

Answer 2

Вам не хватает а / когда это было внутри детей. Это было {path:'create'..., оно должно быть {path: '/create'... внутри дочерних элементов.

Примерно так:

const router = new Router({
    mode: 'history',
    //base: '/sub-path/',
    routes: [
        {
            path: '/',
            alias: '/dashboard',
            name: 'dashboard',
            component: Dashboard,
            meta: {
                auth: true,
                layout: layouts.navLeft,
                searchable: true
            }
        },
        {

            path: '/portaria',
            name: 'portaria',
            component: Portaria,
            meta: {
                auth: true,
                layout: layouts.navTop,
                tipo: 'portaria'
      },
      children: [
                {   path: '/create', //added / here
                    name: 'create',
                    component: PortariaCreate,
                    meta: {
                        auth: true,
                        layout: layouts.navTop
                    }
                }
            ],
        }
    ]
})

Если приведенное выше не работает, попробуйте изменить макет для PortrariaCreate. Если это не сработает, укажите его как прямой путь в Portaria и посмотрите, как он работает