当前位置：首页 > VUE

vue实现导航菜单

2026-01-08 15:32:21VUE

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 中实现导航菜单的主要场景，从基础实现到高级功能如权限控制、状态管理等。根据项目需求选择适合的方案组合使用。

vue实现导航菜单