vue 菜单实现
Vue 菜单实现方法
基础菜单实现
使用 Vue 的 v-for 指令动态渲染菜单项，结合 v-on 或 @click 绑定点击事件。以下是一个简单的示例代码：
<template>
<div>
<ul>
<li v-for="item in menuItems" :key="item.id" @click="handleClick(item)">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
menuItems: [
{ id: 1, name: '首页' },
{ id: 2, name: '产品' },
{ id: 3, name: '关于我们' }
]
}
},
methods: {
handleClick(item) {
console.log('点击了菜单项:', item.name)
}
}
}
</script>嵌套多级菜单
对于多级菜单，可以使用递归组件实现。创建一个子组件 MenuItem 并在父组件中调用：
<template>
<div>
<ul>
<menu-item
v-for="item in menuItems"
:key="item.id"
:item="item"
/>
</ul>
</div>
</template>
<script>
import MenuItem from './MenuItem.vue'
export default {
components: { MenuItem },
data() {
return {
menuItems: [
{
id: 1,
name: '首页',
children: []
},
{
id: 2,
name: '产品',
children: [
{ id: 21, name: '产品A' },
{ id: 22, name: '产品B' }
]
}
]
}
}
}
</script>路由集成
在 Vue 项目中，通常需要将菜单与 Vue Router 集成：
<template>
<div>
<router-link
v-for="item in menuItems"
:key="item.path"
:to="item.path"
>
{{ item.name }}
</router-link>
</div>
</template>
<script>
export default {
data() {
return {
menuItems: [
{ path: '/', name: '首页' },
{ path: '/products', name: '产品' },
{ path: '/about', name: '关于我们' }
]
}
}
}
</script>状态管理
对于大型应用，可以使用 Vuex 管理菜单状态：
// store.js
export default new Vuex.Store({
state: {
menuItems: [
{ id: 1, name: '首页' },
{ id: 2, name: '产品' }
]
},
mutations: {
updateMenu(state, payload) {
state.menuItems = payload
}
}
})动态权限菜单
根据用户权限动态生成菜单：
computed: {
filteredMenu() {
return this.menuItems.filter(item => {
return this.$store.state.user.roles.includes(item.requiredRole)
})
}
}UI 框架集成
如果使用 Element UI 等框架，可以直接使用其菜单组件：
<template>
<el-menu>
<el-submenu v-for="item in menuItems" :key="item.id" :index="item.id">
<template slot="title">{{ item.name }}</template>
<el-menu-item
v-for="child in item.children"
:key="child.id"
:index="child.id"
>
{{ child.name }}
</el-menu-item>
</el-submenu>
</el-menu>
</template>响应式设计
使用 CSS 媒体查询或 Vue 的响应式特性实现移动端适配：
@media (max-width: 768px) {
.menu {
display: none;
}
.mobile-menu-button {
display: block;
}
}以上方法涵盖了 Vue 中实现菜单的常见场景和技术要点，开发者可以根据具体需求选择适合的方案。
