vue实现菜单导航
实现基础菜单结构
使用 Vue 的 v-for 动态渲染菜单项，数据通过数组定义。示例代码：
<template>
<ul class="menu">
<li v-for="item in menuItems" :key="item.id">
<router-link :to="item.path">{{ item.name }}</router-link>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
menuItems: [
{ id: 1, name: "首页", path: "/" },
{ id: 2, name: "产品", path: "/products" },
{ id: 3, name: "关于", path: "/about" }
]
};
}
};
</script>嵌套子菜单支持
通过递归组件实现多级菜单。定义子组件 SubMenu.vue：
<template>
<div class="submenu">
<div @click="toggleSubMenu">{{ parentItem.name }}</div>
<ul v-show="isOpen">
<li v-for="child in parentItem.children" :key="child.id">
<router-link :to="child.path">{{ child.name }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
props: ["parentItem"],
data() {
return { isOpen: false };
},
methods: {
toggleSubMenu() {
this.isOpen = !this.isOpen;
}
}
};
</script>集成路由导航
结合 Vue Router 实现路由跳转。确保路由配置与菜单数据匹配：
// router/index.js
const routes = [
{ path: "/", component: Home },
{ path: "/products", component: Products },
{ path: "/about", component: About }
];高亮当前选中菜单
通过 Vue Router 的 router-link-active 类或自定义逻辑实现：
.router-link-active {
color: #42b983;
font-weight: bold;
}响应式折叠菜单
使用 CSS 媒体查询或 Vue 监听窗口宽度动态切换菜单样式：
data() {
return {
isCollapsed: window.innerWidth < 768
};
},
mounted() {
window.addEventListener("resize", () => {
this.isCollapsed = window.innerWidth < 768;
});
}权限控制菜单项
根据用户角色过滤菜单数据：
computed: {
filteredMenu() {
return this.menuItems.filter(item => {
return user.roles.includes(item.requiredRole);
});
}
}
