Question

我刚开始使用。 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/插件。在任何地方使用它，但“标题”会使导航栏变得混乱。如何实现这个功能？

Answer 1

Navbar组件需要位于app div内部。

你应该做的是有一个根组件来替换叫做App.vue

之类的Hello.vue

App.vue内部有：

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

然后使用vue-router显示您的其他路线，并且标题将在您显示的所有页面的顶部粘贴。基本上'App.vue'将是您应用的布局文件。

如何在vue cli项目的index.html中使用Navbar vue组件？

1 个答案: