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

我剛開始使用。 Vue 2.0 cli。該項目目錄的創建和我的index.html文件看起來是這樣的：如何在vue cli項目的index.html中使用Navbar vue組件？

<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呈現。但我想在header#navbar中呈現我的Navbar組件。我爲導航欄使用http://git.blivesta.com/drawer/插件。在任何地方使用它，但'頭'弄亂了導航欄。如何實現這個功能？

來源

2016-10-16 Shubham Sinha

我的回答有幫助Shubham嗎？ –

Navbar組件需要位於應用程序div的內部。

你應該做的是有一個根組件更換Hello.vue稱爲像App.vue

裏面App.vue有：

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

然後使用VUE路由器，以顯示你的其他路線，並且標題將粘在您顯示的所有頁面的頂部。本質上'App.vue'將是您的應用程序的佈局文件。

來源

2016-10-16 18:25:56

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

回答

相關問題