Vue.js Vue CLI插入导航栏_Vue.js

Vue.js Vue CLI插入导航栏

vue.js

Vue.js Vue CLI插入导航栏,vue.js,Vue.js,因此，我安装了最新的Vue CLI并设置了一个项目。我熟悉Vue的概念，但在结构方面需要帮助。有人可以指导我如何创建一个导航栏，该导航栏将用于所有页面，并包含页面的vue路由器链接吗？我的第一个想法是制作一个组件Navbar.vue，并以某种方式将其放入App.vue中，以便在任何之前进行渲染。这是正确的方法吗？我会尝试将它放在index.html中吗？我不知道该怎么做。我正在使用css的引导 index.html： <!DOCTYPE html> <html> &l

因此，我安装了最新的Vue CLI并设置了一个项目。我熟悉Vue的概念，但在结构方面需要帮助。有人可以指导我如何创建一个导航栏，该导航栏将用于所有页面，并包含页面的vue路由器链接吗？我的第一个想法是制作一个组件

Navbar.vue

，并以某种方式将其放入App.vue中，以便在任何

之前进行渲染。这是正确的方法吗？我会尝试将它放在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>


导出默认值{
名称：“应用程序”
}

您应该添加到

App.vue

。Index.html将仅呈现应用程序

请记住，

路由器视图

将仅呈现您为

调用内的路由设置的组件（在路由器配置中）。应用程序就像是应用程序的布局

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


导出默认值{
名称：“应用程序”
}