问Vue CLI插入导航栏
EN

Stack Overflow用户

提问于 2017-09-29 22:08:52

回答 1查看 706关注 0票数 1

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

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

Stack Overflow用户

发布于 2017-09-30 03:01:56

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46490601

复制

相似问题

问Vue CLI插入导航栏
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue CLI插入导航栏EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue CLI插入导航栏
EN