在核心导航栏上的特定条件下仅显示特定项目 ui vue.js

Question

您好，实际上我对此很陌生，如果我问了一个显而易见的问题，我深表歉意。我实际上使用 vue.js 和 coreui 制作了一个网站。问题是我在这个网站上有两种用户（管理员和联系人）。当联系人登录时，我希望在导航栏中只能查看导航栏上的某些项目。我如何实现这一目标？我一直在阅读文档，但没有找到任何运气。谢谢。

这是我的代码片段： _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>

Answer 1

通过在 sidebar.vue

上添加条件渲染和另一个参数解决了问题

这是我的片段：

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'
    }
  ]
}

而 isAdmin() 和 isContactperson() 是我用来检查用户是管理员还是联系人的函数

在核心导航栏上的特定条件下仅显示特定项目 ui vue.js

Show only certain items at certain condition on navigation bar in core ui vue.js

html

javascript

vue.js

core-ui