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