实施侧边栏不会显示

Question

我实施Vue paper dashboard sidebar.所以我有这样的事情：

进入索引我有

<template>

  <div>
    AdminIndex

    <side-bar>

    </side-bar>
  </div>
</template>

<script>
import { faBox, faImages } from '@fortawesome/fontawesome-free-solid';
import Sidebar from '@/components/sidebar/SideBar';

export default {
  name: 'admin-index-view',

  components: {
    SideBar,
  },

  data() {
    return {
      showSidebar: false,
      sidebarLinks: [
        {
          name: 'admin.menu.products',
          icon: faBoxes,
          route: { name: 'adminProducts' },
        },
        {
          name: 'admin.menu.sliders',
          icon: faImages,
          route: { name: '/admin/stats' },
        },
      ],
    };
  },

  methods: {
    displaySidebar(value) {
      this.showSidebar = value;
    },
  },
};
</script>

SideBar组件：

<template>
  <div :class="sidebarClasses"
       :data-background-color="backgroundColor"
       :data-active-color="activeColor">
    <!--
            Tip 1: you can change the color of the sidebar's background using: data-background-color="white | black | darkblue"
            Tip 2: you can change the color of the active button using the data-active-color="primary | info | success | warning | danger"
        -->
    <!-- -->
    <div class="sidebar-wrapper"
         id="style-3">
      <div class="logo">
        <a href="#"
           class="simple-text">
          <div class="logo-img">
            <img src="static/img/vue-logo.png"
                 alt="">
          </div>
          Paper Dashboard
        </a>
      </div>
      <slot>

      </slot>
      <ul :class="navClasses">
        <!--By default vue-router adds an active class to each route link. This way the links are colored when clicked-->
        <router-link v-for="(link,index) in sidebarLinks"
                     :key="index"
                     :to="link.route"
                     tag="li"
                     :ref="link.name">
          <a>
            <font-awesome-icon :icon="link.icon" />

            <p v-t="link.name" />
          </a>
        </router-link>
      </ul>
      <moving-arrow :move-y="arrowMovePx">

      </moving-arrow>
    </div>
  </div>
</template>
<script>
import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
import MovingArrow from './MovingArrow';

export default {
  name: 'side-bar',

  components: {
    MovingArrow,
    FontAwesomeIcon,
  },

  props: {
    type: {
      type: String,
      default: 'sidebar',
      validator: value => {
        const acceptedValues = ['sidebar', 'navbar'];
        return acceptedValues.indexOf(value) !== -1;
      },
    },
    backgroundColor: {
      type: String,
      default: 'black',
      validator: value => {
        const acceptedValues = ['white', 'black', 'darkblue'];
        return acceptedValues.indexOf(value) !== -1;
      },
    },
    activeColor: {
      type: String,
      default: 'success',
      validator: value => {
        const acceptedValues = [
          'primary',
          'info',
          'success',
          'warning',
          'danger',
        ];
        return acceptedValues.indexOf(value) !== -1;
      },
    },
    sidebarLinks: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      linkHeight: 60,
      activeLinkIndex: 0,

      windowWidth: 0,
      isWindows: false,
      hasAutoHeight: false,
    };
  },

  computed: {
    sidebarClasses() {
      if (this.type === 'sidebar') {
        return 'sidebar';
      }
      return 'collapse navbar-collapse off-canvas-sidebar';
    },
    navClasses() {
      if (this.type === 'sidebar') {
        return 'nav';
      }
      return 'nav navbar-nav';
    },
    /**
     * Styles to animate the arrow near the current active sidebar link
     * @returns {{transform: string}}
     */
    arrowMovePx() {
      return this.linkHeight * this.activeLinkIndex;
    },
  },

  watch: {
    $route() {
      this.findActiveLink();
    },
  },

  methods: {
    findActiveLink() {
      this.sidebarLinks.find((element, index) => {
        const found = element.path === this.$route.path;
        if (found) {
          this.activeLinkIndex = index;
        }
        return found;
      });
    },
  },

  mounted() {
    this.findActiveLink();
  },
};
</script>

我没有收到任何问题或vue错误，侧栏只是不显示。在Chrome控制台中，只返回空：<side-bar data-v-66018f3c=""></side-bar>有人知道为什么侧边栏没有绑定？我需要做些什么来正确实现它？此致

Chrome控制台错误：

  

[Vue警告]：未知的自定义元素： - 你注册了吗？   组件正确吗？对于递归组件，请务必提供   ＆＃34;名称＆＃34;选项。