Vue CLI插入導航欄

所以我安裝了最新的Vue CLI並設置了一個項目。我熟悉Vue的概念，但我需要結構的幫助。有人可以指導我如何創建一個可用於所有頁面的導航欄，幷包含頁面的vue-router鏈接？我的第一個想法是製作一個組件Navbar.vue，並以某種方式將它放到App.vue中，以便它在任何<router-view></router-view>之前呈現。這是做到這一點的正確方法嗎？我會試着把它放在index.html裏面嗎？我很困惑如何做到這一點。我正在使用CSS的bootstrap。Vue CLI插入導航欄

的index.html：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>foo.ca</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
    </head> 
    <body> 
    <div id="app"></div> 
    <!-- built files will be auto injected --> 
    </body> 
</html>

App.vue：

<template> 
    <div id="app"> 
    <!--<img src="./assets/logo.png">--> 
    <router-view></router-view> 
    </div> 
</template> 

<script> 
    export default { 
    name: 'app' 
    } 
</script>

來源

2017-09-29 Dave

您應該添加到App.vue。 Index.html將只呈現應用程序。

請記住，router-view只會呈現您在<router-view></router-view>調用中爲路由設置的組件（在路由器配置中）。應用就像您的應用的佈局。

<template> 
    <div id="app"> 
    <!--<img src="./assets/logo.png">--> 
    <!-- Assuming your navbar is looking like bootstrap --> 
    <navbar></navbar> 
    <!-- You can move container inside every page instead, if you wish so --> 
    <div class="container-fluid"> 
     <div class="row"> 
      <router-view></router-view> 
     </div> 
    </div> 

    </div> 
</template> 

<script> 
    export default { 
    name: 'app' 
    } 
</script>

來源

2017-09-29 19:01:56 cassioscabral

Vue CLI插入導航欄

回答

相關問題