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道具中创建侧边栏项目
...
{
url: "/apps/email",
name: "Email",
slug: "email",
icon: "MailIcon",
i18n: "Email",
},
...
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属性。
...
{
url: { name: 'todo'},
name: "Email",
slug: "email",
icon: "MailIcon",
i18n: "Email",
},
...
Dependencies
- Vue Router
feather-icon
component