Vue JS侧栏菜单

Question

我对vue.js非常陌生，我正在尝试制作侧边栏菜单。当我进入并首次登录时发出问题时，它空白呈现白色边栏当我尝试边栏为空白时，我需要一些帮助 我想在以下

中声明类似脚本时，基于脚本显示侧边栏组件

<template><aside class="main-sidebar sidebar-dark-primary elevation-0" style="z-index: 1001;"><a href="#" class="brand-link-custom bg-primary">
  <Logo class="d-block mx-auto" />
</a><div class="sidebar px-0">
  <div class="user-panel mt-3 pb-3 mb-3 d-flex">
    <div class="image">
      <img
        src="../assets/images/user.jpg"
        class="img-circle elevation-2"
        alt="User Image"
      />
    </div>
    <div class="info">
      <a href="#" class="d-block">
        <b>{{ username }}</b>
      </a>
    </div>
  </div><nav class="mt-2">
    <ul
      class="nav nav-sidebar flex-column"
      data-widget="treeview"
      data-accordion="false"
    >

      <li
        class="nav-item"
        v-for="menu in menus"
        :key="menu.id"
        :class="[menu.childs.length ? 'has-treeview' : '']"
      >
        <router-link
          class="pl-3"
          :to="menu.childs.length ? '#' : `/${menu.slug}`"
          :class="activeClass(menu.key)"
        >
          <i
            style="font-size: .875rem"
            :class="`nav-icon fa ${menu.icon} mr-2`"
          />
          <p>
            {{ menu.name }}
            <i v-if="menu.childs.length" class="right fa fa-angle-left" />
          </p>
        </router-link>
        <ul v-if="menu.childs.length" class="nav nav-treeview">
          <li
            class="nav-item"
            v-for="child in menu.childs"
            :key="`/${menu.slug}/${child.slug}`"
          >
            <router-link
              class="pl-5"
              :to="`/${menu.slug}/${child.slug}`"
              :class="activeClass(child.slug)"
            >
              <p class="pl-2">
                {{ child.name }}
              </p>
            </router-link>
          </li>
        </ul>
      </li>
    </ul>
  </nav></div>

此脚本代码声明侧边栏菜单

<script>
import { mapState } from 'vuex'
import Logo from '@/assets/images/logo.svg'
import Avatar from '@/assets/images/avatar.png'
import LocalStorage from '../helpers/localStorage'

export default {
  data() {
    return {
      Avatar,
      username: LocalStorage.getUser().profile.name,
      menus: [
        {
          icon: 'fa-tachometer-alt',
          title: 'Dashboard',
          key: 'dashboard',
          link: '/',
          class: 'nav-item'
        },
        {
          icon: 'fa-calculator',
          title: 'Estimation',
          link: '#',
          key: 'estimation',
          class: 'nav-item has-treeview',
          submenus: [
            {
              icon: 'fa-circle',
              title: 'Source',
              key: 'source',
              link: '/estimation/source'
            },
            {
              icon: 'fa-circle',
              title: 'Destination',
              key: 'destination',
              link: '/estimation/destination'
            },
            {
              icon: 'fa-circle',
              title: 'Fleet',
              key: 'asset',
              link: '/estimation/asset'
            }
          ]
        },
        {
          icon: 'fa-money-bill',
          title: 'Delivery Order',
          link: '/delivery-order',
          key: 'delivery-order',
          class: 'nav-item'
        },
        {
          icon: 'fa-table',
          title: 'Schedule',
          key: 'schedule',
          link: '#',
          class: 'nav-item has-treeview',
          submenus: [
            {
              icon: 'fa-circle',
              title: 'Input',
              key: 'schedule/summary-planning',
              link: '/schedule'
            },
            {
              icon: 'fa-circle',
              title: 'Plan',
              key: 'schedule/plan',
              link: '/schedule/plan'
            },
            {
              icon: 'fa-circle',
              title: 'Monitoring',
              key: 'schedule/monitoring',
              link: '/schedule/monitoring'
            }
          ]
        },
        {
          icon: 'fa-users',
          title: 'User Management',
          key: 'users',
          link: '/users',
          class: 'nav-item has-treeview'
        },
        {
          icon: 'fa-database',
          title: 'Data Master',
          key: 'master',
          link: '#',
          class: 'nav-item has-treeview',
          submenus: [
            {
              icon: 'fa-circle',
              title: 'Mill',
              key: 'mills',
              link: '/master/mills'
            },
            {
              icon: 'fa-circle',
              title: 'Bulking',
              key: 'master/bulkings',
              link: '/master/bulkings'
            },
            {
              icon: 'fa-circle',
              title: 'Ship',
              key: 'master/ships',
              link: '/master/ships'
            },
            {
              icon: 'fa-circle',
              title: 'Truck',
              key: 'vehicles',
              link: '/master/vehicles'
            },
            {
              icon: 'fa-circle',
              title: 'Group',
              key: 'groups',
              link: '/master/groups'
            }
          ]
        }
      ]
    }
  },
  components: {
    Logo
  },
  computed: {
    ...mapState('auth', ['user'])
  },
  methods: {
    activeClass(value) {
      return this.$route.meta.key.includes(value)
        ? 'nav-link active'
        : 'nav-link'
    },

    isObjEmpty(obj) {
      return Object.keys(obj).length === 0
    }
  },

  mounted() {
    $('[data-widget="treeview"]').Treeview('init')
    this.menus.push({
      id: 99,
      childs: [
        {
          slug: 'trip',
          name: 'Trip'
        },
        {
          slug: 'reason-late',
          name: 'Reason Late'
        },
        {
          slug: 'section-algo',
          name: 'Section Algo'
        }
      ],
      slug: 'configuration',
      name: 'Configuration',
      icon: 'fa-cogs'
    })
  }
}
</script>

<style scoped>
.nav-item {
  font-family: 'Source Sans Pro';
}
.sidebar-dark-primary {
  background-color: #222;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .active.brand-link-custom,
.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-treeview > .nav-item > .active.brand-link-custom,
.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active:hover,
.sidebar-dark-primary
  .nav-treeview
  > .nav-item
  > .active.brand-link-custom:hover {
  background-color: transparent;
  color: #fff;
  font-weight: bold;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .active.brand-link-custom {
  box-shadow: inset 5px 0 0 0 #ef243d;
  background-color: rgba(255, 255, 255, 0.1);
}
</style>