vue实现导航菜单

Vue 实现导航菜单的方法

使用 Vue Router 实现基础导航

安装 Vue Router 依赖：

npm install 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
})

export default router

在 App.vue 中添加导航菜单：

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

实现动态导航菜单

创建可配置的导航菜单数据：

// data/navItems.js
export default [
  { name: 'Home', path: '/' },
  { name: 'About', path: '/about' },
  { name: 'Contact', path: '/contact' }
]

在组件中使用动态菜单：

<template>
  <nav>
    <router-link 
      v-for="item in navItems" 
      :key="item.path"
      :to="item.path"
    >
      {{ item.name }}
    </router-link>
  </nav>
</template>

<script>
import navItems from '@/data/navItems'
export default {
  data() {
    return {
      navItems
    }
  }
}
</script>

添加菜单激活样式

使用 Vue Router 的 active-class：

<router-link 
  to="/about" 
  active-class="active"
>
  About
</router-link>

或者使用 exact-active-class 精确匹配：

<router-link 
  to="/" 
  exact-active-class="exact-active"
>
  Home
</router-link>

实现嵌套导航菜单

配置嵌套路由：

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

创建嵌套导航组件：

<template>
  <div>
    <nav>
      <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>
    </nav>
    <router-view />
  </div>
</template>

添加下拉菜单功能

实现基础下拉菜单：

<template>
  <div class="dropdown">
    <button @click="toggleDropdown">Menu</button>
    <ul v-show="isOpen">
      <li v-for="item in menuItems" :key="item.path">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      menuItems: [
        { name: 'Home', path: '/' },
        { name: 'About', path: '/about' }
      ]
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown ul {
  position: absolute;
  background: white;
  border: 1px solid #ddd;
}
</style>

实现面包屑导航

创建面包屑组件：

<template>
  <div class="breadcrumbs">
    <router-link 
      v-for="(crumb, index) in crumbs" 
      :key="index"
      :to="crumb.path"
    >
      {{ crumb.name }}
    </router-link>
  </div>
</template>

<script>
export default {
  computed: {
    crumbs() {
      const pathArray = this.$route.path.split('/')
      return pathArray.map((path, i) => {
        return {
          name: path || 'home',
          path: pathArray.slice(0, i + 1).join('/') || '/'
        }
      })
    }
  }
}
</script>

添加响应式导航菜单

实现移动端响应式菜单：

<template>
  <nav>
    <button @click="toggleMenu">☰</button>
    <ul :class="{ 'show': menuOpen }">
      <li v-for="item in navItems" :key="item.path">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      menuOpen: false,
      navItems: [
        { name: 'Home', path: '/' },
        { name: 'About', path: '/about' }
      ]
    }
  },
  methods: {
    toggleMenu() {
      this.menuOpen = !this.menuOpen
    }
  }
}
</script>

<style>
@media (max-width: 768px) {
  ul {
    display: none;
  }
  ul.show {
    display: block;
  }
}
</style>

使用第三方 UI 库实现导航

使用 Element Plus 的菜单组件：

<template>
  <el-menu mode="horizontal" router>
    <el-menu-item index="/">Home</el-menu-item>
    <el-menu-item index="/about">About</el-menu-item>
    <el-submenu index="products">
      <template #title>Products</template>
      <el-menu-item index="/products/1">Product 1</el-menu-item>
      <el-menu-item index="/products/2">Product 2</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { ElMenu, ElMenuItem, ElSubmenu } from 'element-plus'
export default {
  components: {
    ElMenu,
    ElMenuItem,
    ElSubmenu
  }
}
</script>