问题
Hi I am actually quite new to this, so I'm sorry if I asked an obvious question. I actually making a website using vue.js and coreui. The question is I have 2 kinds of user on this website (admin and contact person). What I hope is in the navigation bar when contact person logged in only certain items on the navbar can be viewed. How do I achieve this? I have been reading the documentation and I found no lucks. Thanks.
Here is my code snippet: _nav.js
export default {
items: [
{
name: 'Dashboard',
url: '/dashboard',
icon: 'icon-speedometer'
},
{
name: 'Users',
url: '/users',
icon: 'icon-list',
children: [
{
name: 'Admin',
url: '/users/administrator',
icon: 'icon-user'
},
{
name: 'Contact Person',
url: '/users/contact_person',
icon: 'icon-phone'
},
{
name: 'Basic',
url: '/users/basic',
icon: 'icon-people'
}
]
},
{
name: 'Devices',
url: '/devices',
icon: 'icon-screen-smartphone',
children: [
{
name: 'Gateway',
url: '/devices/Gateway',
icon: 'icon-cloud-upload'
},
{
name: 'Sensor',
url: '/devices/Sensor',
icon: 'icon-eye'
}
]
},
{
name: 'Warning Log',
url: '/log-devices',
icon: 'fa fa-warning'
},
{
name: 'Tickets',
url: '/tickets',
icon: 'fa fa-ticket'
},
{
name: 'Reports',
url: '/reports',
icon: 'icon-notebook'
},
{
name: 'Settings',
url: '/settings',
icon: 'icon-settings'
}
]
}
index.js
import Vue from 'vue'
import Router from 'vue-router'
// Containers
import Full from '@/containers/Full'
// Views
import Dashboard from '@/views/Dashboard'
import Users from '@/views/Users'
import Save from '@/views/Table/Save'
import Login from '@/views/Login'
import Devices from '@/views/Devices'
import Create from '@/views/Table/Create'
import AddTicket from '@/views/Ticket/Add Ticket'
import DeviceDetailed from '@/views/Device/Device Detailed'
import EditDevice from '@/views/Device/Edit Device'
import UserDetailed from '@/views/User/User Detailed'
import Ticket from '@/views/Tickets'
import TicketDetailed from '@/views/Ticket/Ticket Detailed'
import EditTicket from '@/views/Ticket/Edit Ticket'
import Report from '@/views/Report'
import Profile from '@/views/Profile'
import LogDevice from '@/views/Device/Log Device'
import Setting from '@/views/Settings'
Vue.use(Router)
export default new Router({
mode: 'hash',
linkActiveClass: 'open active',
scrollBehavior: () => ({ y: 0 }),
routes: [
{
path: '/',
redirect: '/dashboard',
name: 'Home',
component: Full,
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: Dashboard,
meta: {
forAuth: true
}
},
{
path: 'users',
name: 'Users',
component: Users,
meta: {
forAdmin: true
}
},
{
path: 'users/:role',
name: 'Users',
component: Users,
meta: {
forAdmin: true
}
},
{
path: 'devices',
name: 'Devices',
component: Devices,
meta: {
forAuth: true
}
},
{
path: 'devices/:group',
name: 'Devices',
component: Devices,
meta: {
forAuth: true
}
},
{
path: 'save',
name: 'Save',
component: Save,
meta: {
forAdmin: true
}
},
{
path: 'user-detailed/:username',
name: 'User Detailed',
component: UserDetailed,
meta: {
forAdmin: true
}
},
{
path: 'create',
name: 'Create',
component: Create,
meta: {
forAuth: true
}
},
{
path: 'device-detailed/:deviceid',
name: 'Device Detailed',
component: DeviceDetailed,
meta: {
forAuth: true
}
},
{
path: 'edit-devices',
name: 'Edit Devices',
component: EditDevice,
meta: {
forAdmin: true
}
},
{
path: 'log-devices',
name: 'Log Devices',
component: LogDevice,
meta: {
forAuth: true
}
},
{
path: 'tickets',
name: 'Tickets',
component: Ticket,
meta: {
forAuth: true
}
},
{
path: 'add-tickets',
name: 'Add Tickets',
component: AddTicket,
meta: {
forAdmin: true
}
},
{
path: 'ticket-detailed/:ticketid',
name: 'Ticket Detailed',
component: TicketDetailed,
meta: {
forAuth: true
}
},
{
path: 'edit-tickets',
name: 'Edit Tickets',
component: EditTicket,
meta: {
forAdmin: true
}
},
{
path: 'reports',
name: 'Reports',
component: Report,
meta: {
forAdmin: true
}
},
{
path: 'settings',
name: 'Settings',
component: Setting,
meta: {
forAdmin: true
}
},
{
path: 'profile',
name: 'Profile',
component: Profile,
meta: {
forAuth: true
}
}
]
},
{
path: '/',
component: { render (c) { return c('router-view') } },
children: [
{
path: 'login',
name: 'Login',
component: Login
}
]
}
]
})
sidebarnavitem.vue
<template>
<li :class="classList" @click="hideMobile">
<slot></slot>
</li>
</template>
<script>
export default {
name: 'sidebar-nav-item',
props: {
classes: {
type: String,
default: ''
}
},
computed: {
classList () {
return [
'nav-item',
...this.itemClasses
]
},
itemClasses () {
return this.classes ? this.classes.split(' ') : ''
}
},
methods: {
hideMobile () {
if (document.body.classList.contains('sidebar-mobile-show')) {
document.body.classList.toggle('sidebar-mobile-show')
}
}
}
}
</script>
Sidebar.vue
<template>
<div class="sidebar">
<SidebarHeader/>
<SidebarForm/>
<nav class="sidebar-nav">
<div slot="header"></div>
<ul class="nav">
<template v-for="(item, index) in navItems">
<template v-if="item.title">
<SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
</template>
<template v-else-if="item.divider">
<SidebarNavDivider :classes="item.class"/>
</template>
<template v-else>
<template v-if="item.children">
<!-- First level dropdown -->
<SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon">
<template v-for="(childL1, index) in item.children">
<template v-if="childL1.children">
<!-- Second level dropdown -->
<SidebarNavDropdown :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
<li class="nav-item" v-for="(childL2, index) in childL1.children">
<SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
</li>
</SidebarNavDropdown>
</template>
<template v-else>
<SidebarNavItem :classes="item.class">
<SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
</SidebarNavItem>
</template>
</template>
</SidebarNavDropdown>
</template>
<template v-else>
<SidebarNavItem :classes="item.class">
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
</SidebarNavItem>
</template>
</template>
</template>
</ul>
<slot></slot>
</nav>
<SidebarFooter/>
<SidebarMinimizer/>
</div>
</template>
<script>
import SidebarFooter from './SidebarFooter'
import SidebarForm from './SidebarForm'
import SidebarHeader from './SidebarHeader'
import SidebarMinimizer from './SidebarMinimizer'
import SidebarNavDivider from './SidebarNavDivider'
import SidebarNavDropdown from './SidebarNavDropdown'
import SidebarNavLink from './SidebarNavLink'
import SidebarNavTitle from './SidebarNavTitle'
import SidebarNavItem from './SidebarNavItem'
export default {
name: 'sidebar',
props: {
navItems: {
type: Array,
required: true,
default: () => []
}
},
components: {
SidebarFooter,
SidebarForm,
SidebarHeader,
SidebarMinimizer,
SidebarNavDivider,
SidebarNavDropdown,
SidebarNavLink,
SidebarNavTitle,
SidebarNavItem
},
methods: {
handleClick (e) {
e.preventDefault()
e.target.parentElement.classList.toggle('open')
}
}
}
</script>
<style lang="css">
.nav-link {
cursor:pointer;
}
</style>
回答1:
Solved the problem by adding conditional rendering and another parameter on sidebar.vue
Here is my snippet:
sidebar.vue
<template v-else>
<template v-if="item.meta === 'forAuth' && $auth.isContactPerson() === true">
<SidebarNavItem :classes="item.class">
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
</SidebarNavItem>
</template>
<template v-if="$auth.isAdmin() === true">
<SidebarNavItem :classes="item.class">
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
</SidebarNavItem>
</template>
</template>
_nav.js
export default {
items: [
{
name: 'Dashboard',
url: '/dashboard',
icon: 'icon-speedometer',
meta: 'forAuth'
},
{
name: 'Users',
url: '/users',
icon: 'icon-list',
meta: 'forAdmin',
children: [
{
name: 'Admin',
url: '/users/administrator',
icon: 'icon-user'
},
{
name: 'Contact Person',
url: '/users/contact_person',
icon: 'icon-phone'
},
{
name: 'Basic',
url: '/users/basic',
icon: 'icon-people'
}
]
},
{
name: 'Devices',
url: '/devices',
icon: 'icon-screen-smartphone',
meta: 'forAuth',
children: [
{
name: 'Gateway',
url: '/devices/Gateway',
icon: 'icon-cloud-upload'
},
{
name: 'Sensor',
url: '/devices/Sensor',
icon: 'icon-eye'
}
]
},
{
name: 'Warning Log',
url: '/log-devices',
icon: 'fa fa-warning',
meta: 'forAuth'
},
{
name: 'Tickets',
url: '/tickets',
icon: 'fa fa-ticket',
meta: 'forAuth'
},
{
name: 'Reports',
url: '/reports',
icon: 'icon-notebook',
meta: 'forAdmin'
},
{
name: 'Settings',
url: '/settings',
icon: 'icon-settings',
meta: 'forAdmin'
}
]
}
and isAdmin() and isContactperson() is a function that I made to check whether the user is an admin or contact person
来源：https://stackoverflow.com/questions/51625394/show-only-certain-items-at-certain-condition-on-navigation-bar-in-core-ui-vue-js