1

Начал только осваивать Vue.js и сразу столкнулся с проблемой что не получаеться вывести компонент Navbar.vue в конпонент App.vue. Буду признателен за помощь если подскажите как это сделать. В консоли ошибка Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

js/App.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
import App from './components/App';
import Navbar from './components/Navbar';
import Home from './components/Home';
import Articles from './components/Articles';

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/articles',
            name: 'articles',
            component: Articles,
        }
    ],
});

const app = new Vue({
    el: '#app',
    components: { App },
    router,
});

js/components/App.vue

<template>
    <div>
        <navbar></navbar>
        <div class="container">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    export default {}
</script>

js/components/Navbar.vue

<template>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
        <ul class="navbar-nav">
            <li class="nav-item">
                <router-link :to="{ name: 'home' }" class="nav-link">Home</router-link>
            </li>
            <li class="nav-item">
                <router-link :to="{ name: 'articles' }" class="nav-link">Articles</router-link>
            </li>
        </ul>
    </nav>
</template>
<script>
    export default {}
</script>

1 ответ 1

1

js/components/App.vue:

<template>
    <div>
        <navbar></navbar>
        <div class="container">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    import Navbar from '@/components/Navbar';

    export default {
      name: 'App',
      components: {
        Navbar,
      },
    };
</script>

А строка import Navbar from './components/Navbar'; в файле js/App.js у вас не используется.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.