vue侧边栏组件_Vue.js侧边栏菜单组件

最新推荐文章于 2026-05-15 12:21:35 发布

翻译最新推荐文章于 2026-05-15 12:21:35 发布 · 4.8k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://vuejsexamples.com/a-vue-js-sidebar-menu-component/

标签

#vue #window #zabbix #weex #migration

#ViewUI

收录于

本文介绍了一个Vue.js的侧边栏菜单组件，通过简单的安装和使用步骤，即可在项目中实现美观且功能丰富的侧边菜单。组件支持自定义菜单项的链接、标题和图标。

vue侧边栏组件

边栏菜单 (vue-sidebar-menu)

A Vue.js Sidebar Menu Component.

Vue.js侧栏菜单组件。

View demo 查看演示 Download Source 下载源

安装 (Installation)

npm i vue-sidebar-menu --save

用法 (Usage)

import Vue from 'vue'
import VueSidebarMenu from 'vue-sidebar-menu'

Vue.use(VueSidebarMenu)

<template>
  <sidebar-menu :menu="menu" />
</template>

<script>
    export default {
        data() {
            menu: [
                {
                    href: '/',
                    title: 'Dashboard',
                    icon: 'fa fa-user'
                },
                {
                    href: '#',
                    title: 'Charts',
                    icon: 'fa fa-chart-area'
                },
            ]
        }
    }
</script>