Question

我是VueJS的新手，我在“组件”中组织了不同的页面。现在，不同的页面具有不同的布局，例如，某些页面将不包含页眉和页脚（它们也是单独的组件）。

这是应该包含标题的组件的代码

<template>
    <Header />
    <div class="container main-content">
        <div class="row">
            <div class="col-lg-2"></div>
            <div class="col-lg-8">
                <h3 style="font-weight: bold;color: #000;">What will you like to do?</h3>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
                    <div class="item-body">
                        <router-link to="/dashboards" class="">
                            <i class="fa fa-user fa-4x"></i>
                            <p>View Dashboards</p>
                        </router-link>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
                    <div class="item-body">
                        <router-link to="/home" class="">
                            <i class="fa fa-cogs fa-4x"></i>
                            <p>Manage Settings</p>
                        </router-link>
                    </div>
                </div>
            </div>
            <div class="col-lg-2"></div>
        </div>
    </div>
</template>
<script>
    import Header from './Header.vue'

    export default{
        name: 'Loyalty',
        components:{
            'Header': Header
        }
    }
</script>

这是我的Header.vue

<template>
    <div>
        <div class="head">
          <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
              <span class="pull-left" style="padding-left: 10px;">
                <router-link to="/home" class="header-text page-link"><span class="fa fa-arrow-left"></span>&nbsp;&nbsp;Home</router-link>
              </span>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 custom-hidden-sm">
              <span class="pull-right" style="padding-right: 10px;">
                <span class="header-text">Waje Loyalty</span>
              </span>
            </div>
          </div>
        </div>
    </div>
</template>
<script>
    export default{
        name: 'Header',
        data(){
            return{
              page_name: this.$router.currentRoute.name
            }
        }
    }
</script>

编译时出现错误：

- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

我该如何解决？

Answer 1

此问题是由Loyalty.vue模板中的两个根元素引起的：<Header />和<div class="container main-content">。

VueJS组件模板可以包含一个且只有一个根节点。

要解决此问题，请用根Loyalty.vue包装div模板的内容。

<template>
    <!-- root div -->
    <div> 
      <Header />
      <div class="container main-content">
          <div class="row">
              <div class="col-lg-2"></div>
              <div class="col-lg-8">
                  <h3 style="font-weight: bold;color: #000;">What will you like to do?</h3>
                  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
                      <div class="item-body">
                          <router-link to="/dashboards" class="">
                              <i class="fa fa-user fa-4x"></i>
                              <p>View Dashboards</p>
                          </router-link>
                      </div>
                  </div>
                  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 dash-menu-item">
                      <div class="item-body">
                          <router-link to="/home" class="">
                              <i class="fa fa-cogs fa-4x"></i>
                              <p>Manage Settings</p>
                          </router-link>
                      </div>
                  </div>
              </div>
              <div class="col-lg-2"></div>
          </div>
      </div>
    </div>
</template>

如何从另一个组件调用VueJS组件

1 个答案: