Vue routers children не работает?

Question

[Игорь]

Коллеги, приветствую, не работает вложенные маршруты

/view/index.js

spoiler

import Index from './Index.vue'
import FoodItems from './Foods/Items.vue'
import FoodNew from './Foods/New.vue'
import FoodEdit from './Foods/New.vue'
import OrderItems from './Orders/Items.vue'

export const VIEW = {
    Index,
    FoodItems,
    FoodNew,
    FoodEdit,
    OrderItems
}

/router.js

spoiler

import Vue from "vue"
import Router from "vue-router"

import {VIEW} from "./views/index"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: "/",
      name: "Index",
      component: VIEW.Index
    },
    {
      path: "/foods",
      name: "Foods Items",
      component: VIEW.FoodItems,
      children: [
        {
          path: "new",
          component: VIEW.FoodNew
        },
        {
          path: "edit",
          component: VIEW.FoodEdit
        }
      ],
    },
    {
      path: "/orders",
      name: "Orders Items",
      component: VIEW.OrderItems
    },
    {
      path: "/about",
      name: "About",
      component: () => import( "./views/About.vue")
    }
  ]
})

Не переходит к дочерним роутам.
Навигация происходит только

Где я косячу?

Руководствовался документацией

Answer 1

[0xD34F]

А есть где их отображать? Не забыли добавить router-view в FoodItems?

Comments

[Игорь]

А его разве не в App.vue размещать?
Вот я тупица.

Я так понимаю должен отрендерить внутри текущего компонента другой компонент

[0xD34F]

А его разве не в App.vue размещать?

Вы значение слова "вложенный" понимаете?

[Игорь]

0xD34F, да.

[Игорь]

Глупость спросил, признаю

[0xD34F]

да

Ну тогда вы врали, когда говорили про "руководствовался документацией". Там чёрным по белому написано, что вложенным маршрутам нужны вложенные же router-view.