Vuexy Admin uses extended sidebar item component in v-nav-menu and v-nav-menu-group component.
Vuexy Admin在v-nav-menu和v-nav-menu-group组件中使用扩展的侧边栏项目组件。

Name Update

VxSidebarItem component is now VerticalNavMenuItem.

Overview

Component Name: v-nav-menu-item
Use case: Build sidebar item in v-nav-menu and v-nav-menu-group component
Path: src/layouts/components/vertical-nav-menu/VerticalNavMenuItem.vue
Is Globally Registred: false

Using Component

This component is internally handled by v-nav-menu and v-nav-menu-group. So, you don’t have to worry about setting up v-nav-menu-item.
该组件由v-nav-menu和v-nav-menu-group内部处理。因此,您不必担心设置v-nav-menu-item。

How to create sidebar item in sidebarItems prop of v-nav-menu
如何在v-nav-menu的sidebarItems道具中创建侧边栏项目

  1. ...
  2. {
  3. url: "/apps/email",
  4. name: "Email",
  5. slug: "email",
  6. icon: "MailIcon",
  7. i18n: "Email",
  8. },
  9. ...

Above code will create nav item named Email from it’s i18n property. If i18n is disabled in your app then It will fall back to name property.
If nav item is sub item of sidebar group then it will always get CicleIcon feather icon. So, there’s need to define icon if nav group is parent of nav item.
上面的代码将从其i18n属性创建名为Email的导航项目。 如果您的应用程序中禁用了i18n,则它将回退到name属性。
如果导航项是侧边栏组的子项,则它将始终获得CicleIcon羽毛图标。 因此,如果导航组是导航项的父项,则需要定义图标。

Using Object for routing

VerticalNavMenuItem component is much smarter now. You can also pass an object to the url property.
VerticalNavMenuItem组件现在更加智能。您还可以将对象传递给url属性。

  1. ...
  2. {
  3. url: { name: 'todo'},
  4. name: "Email",
  5. slug: "email",
  6. icon: "MailIcon",
  7. i18n: "Email",
  8. },
  9. ...

Dependencies

  • Vue Router
  • feather-icon component