Vue CLI 插入导航栏答案

【问题标题】：Vue CLI Insert NavbarVue CLI 插入导航栏
【发布时间】：2017-09-30 03:01:56
【问题描述】：

所以我已经安装了最新的 Vue CLI 并设置了一个项目。我熟悉 Vue 的概念，但我需要结构方面的帮助。有人可以指导我如何创建一个导航栏，该导航栏将在所有页面中使用并包含页面的 vue-router 链接？我的第一个想法是制作一个组件 Navbar.vue 并以某种方式将其放入 App.vue 以便在任何 <router-view></router-view> 之前呈现它。这是正确的方法吗？我会尝试把它放在 index.html 中吗？我对如何做到这一点感到困惑。我正在为 css 使用引导程序。

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>

【问题讨论】：

标签： vue.js

【解决方案1】：

您应该添加到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>

【讨论】：