Question

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

Answer 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>

Vue CLI插入Navbar

1 个答案: