当前位置：首页 > VUE

vue导航菜单实现

2026-02-20 13:28:15VUE

实现Vue导航菜单的方法

使用Vue Router实现基础导航

在Vue项目中安装vue-router后，可以创建基本的路由导航结构。定义路由配置文件，包含各个页面的路径和组件映射。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

在App.vue中使用router-link组件创建导航菜单：

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

创建多级嵌套菜单

对于复杂的应用结构，可以使用嵌套路由实现多级菜单。在路由配置中添加children属性定义子路由。

// router/index.js
const routes = [
  {
    path: '/products',
    component: Products,
    children: [
      { path: 'list', component: ProductList },
      { path: 'detail/:id', component: ProductDetail }
    ]
  }
]

在模板中使用v-for动态渲染多级菜单：

<template>
  <div v-for="item in menuItems" :key="item.path">
    <router-link :to="item.path">{{ item.title }}</router-link>
    <div v-if="item.children" class="submenu">
      <router-link 
        v-for="child in item.children" 
        :key="child.path"
        :to="child.path"
      >
        {{ child.title }}
      </router-link>
    </div>
  </div>
</template>

添加菜单交互效果

通过Vue的响应式特性为菜单添加悬停、展开等交互效果。使用v-show或v-if控制子菜单的显示状态。

<template>
  <div 
    v-for="item in menuItems" 
    :key="item.path"
    @mouseenter="activeItem = item.path"
    @mouseleave="activeItem = null"
  >
    <router-link :to="item.path">{{ item.title }}</router-link>
    <div 
      class="submenu" 
      v-show="activeItem === item.path && item.children"
    >
      <!-- 子菜单内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeItem: null,
      menuItems: [
        { path: '/', title: 'Home' },
        { 
          path: '/products', 
          title: 'Products',
          children: [
            { path: '/products/list', title: 'List' },
            { path: '/products/detail', title: 'Detail' }
          ]
        }
      ]
    }
  }
}
</script>

使用UI组件库快速实现

主流UI库如Element Plus、Ant Design Vue等提供了现成的导航菜单组件，可以快速集成。

以Element Plus为例：

<template>
  <el-menu 
    :default-active="activeIndex" 
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1">Home</el-menu-item>
    <el-sub-menu index="2">
      <template #title>Products</template>
      <el-menu-item index="2-1">List</el-menu-item>
      <el-menu-item index="2-2">Detail</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect(key) {
      console.log(key)
    }
  }
}
</script>

响应式菜单设计

通过CSS媒体查询或Vue的响应式数据实现移动端适配，常见的是将导航菜单转换为汉堡菜单。

vue导航菜单实现

<template>
  <button @click="showMobileMenu = !showMobileMenu">☰</button>
  <nav :class="{ 'mobile-menu': true, 'active': showMobileMenu }">
    <!-- 菜单内容 -->
  </nav>
</template>

<script>
export default {
  data() {
    return {
      showMobileMenu: false
    }
  }
}
</script>

<style>
.mobile-menu {
  display: none;
}
.mobile-menu.active {
  display: block;
}
@media (min-width: 768px) {
  .mobile-menu {
    display: block;
  }
}
</style>