Javascript 在core ui vue.js中的导航栏上，在特定条件下仅显示特定项目

嗨，我实际上对这个很陌生，所以如果我问了一个明显的问题，我很抱歉。我实际上使用vue.js和coreui创建了一个网站。问题是我在这个网站上有两种用户（管理员和联系人）。当联系人登录时，我希望导航栏中只能查看导航栏上的某些项目。我如何做到这一点？我一直在阅读文档，没有发现任何运气。谢谢

以下是我的代码片段： _nav.js

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>

导出默认值{
名称：'侧栏导航项'，
道具：{
课程：{
类型：字符串，
默认值：“”
}
},
计算：{
类列表（）{
返回[
“导航项目”，
…这是一个项目类
]
},
ItemClass（）{
返回此.classes？此.classes.split（“”）：“”
}
},
方法：{
可怕的（）{
if（document.body.classList.contains（'sidebar-mobile-show'））{
document.body.classList.toggle（'sidebar-mobile-show'）
}
}
}
}

边栏.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>

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

childL1.children中的



从“./SidebarFooter”导入SidebarFooter
从“./SidebarForm”导入SidebarForm
从“./SidebarHeader”导入SidebarHeader
从“./SidebarMinimizer”导入SidebarMinimizer
从“./SidebarNavDivider”导入SidebarNavDivider
从“./SidebarNavDropdown”导入SidebarNavDropdown
从“./SidebarNavLink”导入SidebarNavLink
从“./SidebarNavTitle”导入SidebarNavTitle
从“./SidebarNavItem”导入SidebarNavItem
导出默认值{
名称：'侧边栏'，
道具：{
navItems：{
类型：数组，
要求：正确，
默认值：（）=>[]
}
},
组成部分：{
边栏页脚，
侧边栏，
侧边栏标题，
侧边栏，
侧边分隔器，
侧边栏下拉列表，
侧链，
侧边标题，
SidebarNavItem
},
方法：{
handleClick（e）{
e、 预防默认值（）
e、 target.parentElement.classList.toggle（'open'）
}
}
}
.导航链路{
光标：指针；
}

通过在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>

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

以下是我的片段：

边栏.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>

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

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