Блог

Главная - Вопросы по программированию - Как использовать компонент Navbar vue в index.html из проекта vue cli?

Как использовать компонент Navbar vue в index.html из проекта vue cli?

#vue.js

#vue.js

Вопрос:

Я только начал употреблять. Vue 2.0 cli. Каталог проекта был создан, и мой index.html файл выглядит следующим образом :

 <body class="drawer drawer--top">
<header class="drawer-navbar" role="banner" id="navbar">
    <Navbar></Navbar>
 </header>

<div id="app">
</div>
</body>

Hello Компонент ( созданный с помощью Vue cli ) визуализируется в div#app . Но я хочу отобразить свой Navbar компонент внутри header#navbar . Я использую http://git.blivesta.com/drawer / плагин для навигационной панели. Использование его где угодно, кроме «заголовка», портит панель навигации. Как реализовать эту функцию ?

Комментарии:

1. Помог ли мой ответ Шубхэму?

Ответ №1:

Компонент Navbar должен находиться внутри приложения div.

Что вам нужно сделать, так это иметь корневой компонент для замены Hello.vue, который называется что-то вроде App.vue

Внутри App.vue есть:

 <header class="drawer-navbar" role="banner" id="navbar">
  <Navbar></Navbar>
</header>
<router-view></router-view>

Затем используйте vue-router для отображения других ваших маршрутов, и заголовок будет отображаться в верхней части всех отображаемых вами страниц. По сути, ‘App.vue’ будет файлом макета для вашего приложения.

Метки: