Компонент Vue не загружается: правильно ли вы его зарегистрировали?

Question

Мой роутер имеет:

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [{
            path: '/',
            name: 'login',
            component: Login,
        },
        {
            path: '/app',
            component: Container,
            children: [{
                path: '',
                name: 'home',
                component: Home
            }]

        },
    ],
});

Мой Container.vue имеет:

<template>
  <div>
    <Navigation />
    <router-view />
  </div>
</template>

<script>
import Navigation from "./Navigation.vue";
export default {
  name: "Container",
  props: {
    msg: String
  }
};
</script>

Но я получаю ошибку:

Неизвестный пользовательский элемент: - правильно ли вы зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите опцию «name».

найдено в

---> в src / components / Container.vue в src / App.vue

В моем Navigation.vue у меня есть

<template>
  <nav class="nav nav-pills flex-column flex-sm-row">
    <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
    <a
      class="flex-sm-fill text-sm-center nav-link disabled"
      href="#"
      tabindex="-1"
      aria-disabled="true"
    >Disabled</a>
  </nav>
</template>

<script>
export default {
  name: "Navigation"
};
</script>

Answer 1

Вам не хватает добавить components:{Navigation} в Container.vue компонент

export default {
  name: "Container",
  props: {
    msg: String
  },
components:{Navigation}
};