vue实现导航菜单
Vue 实现导航菜单的方法
基础路由导航实现
在 Vue 项目中，使用 vue-router 可以轻松实现导航菜单功能。首先安装并配置路由：
npm install vue-router在 router/index.js 中定义路由：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: () => import('../views/About.vue') }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router导航菜单组件
创建 NavMenu.vue 组件：
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
</template>
<script>
export default {
name: 'NavMenu'
}
</script>
<style scoped>
nav {
display: flex;
gap: 1rem;
padding: 1rem;
background: #f0f0f0;
}
.router-link-active {
font-weight: bold;
color: #42b983;
}
</style>动态菜单实现
对于需要从 API 获取的菜单数据，可以使用响应式数据：
<template>
<nav>
<router-link
v-for="item in menuItems"
:key="item.path"
:to="item.path"
>
{{ item.name }}
</router-link>
</nav>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const menuItems = ref([
{ path: '/', name: 'Home' },
{ path: '/about', name: 'About' },
{ path: '/contact', name: 'Contact' }
])
return { menuItems }
}
}
</script>嵌套路由菜单
对于多级菜单，可以配置嵌套路由：
const routes = [
{
path: '/products',
component: ProductsLayout,
children: [
{ path: '', component: ProductList },
{ path: ':id', component: ProductDetail }
]
}
]对应菜单组件：
<template>
<div>
<router-link to="/products">All Products</router-link>
<router-link
v-for="product in products"
:key="product.id"
:to="`/products/${product.id}`"
>
{{ product.name }}
</router-link>
</div>
</template>响应式菜单样式
使用 CSS 实现响应式设计：
@media (max-width: 768px) {
nav {
flex-direction: column;
}
}菜单状态管理
对于复杂的菜单状态，可以使用 Pinia：
// stores/menu.js
import { defineStore } from 'pinia'
export const useMenuStore = defineStore('menu', {
state: () => ({
isCollapsed: false,
activeItem: 'home'
}),
actions: {
toggleCollapse() {
this.isCollapsed = !this.isCollapsed
}
}
})权限控制菜单
根据用户权限过滤菜单项：
<script>
import { computed } from 'vue'
import { useAuthStore } from '@/stores/auth'
export default {
setup() {
const auth = useAuthStore()
const allMenuItems = [
{ path: '/admin', name: 'Admin', role: 'admin' },
{ path: '/dashboard', name: 'Dashboard', role: 'user' }
]
const menuItems = computed(() =>
allMenuItems.filter(item => item.role <= auth.user.role)
)
return { menuItems }
}
}
</script>这些方法涵盖了 Vue 中实现导航菜单的主要场景，从基础实现到高级功能如权限控制、状态管理等。根据项目需求选择适合的方案组合使用。
