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插入导航栏

回答

相关问题