当前位置：首页 > VUE

vue实现菜单点击

2026-01-21 15:38:43VUE

实现菜单点击功能

在Vue中实现菜单点击功能可以通过多种方式完成，以下是一种常见的方法：

模板部分

<template>
  <div>
    <ul>
      <li v-for="item in menuItems" :key="item.id" @click="handleMenuClick(item)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, name: '首页' },
        { id: 2, name: '产品' },
        { id: 3, name: '关于我们' }
      ]
    }
  },
  methods: {
    handleMenuClick(item) {
      console.log('点击了菜单:', item.name)
      // 这里可以添加路由跳转或其他业务逻辑
    }
  }
}
</script>

添加路由功能

如果菜单需要实现页面跳转，可以结合Vue Router使用：

安装Vue Router

npm install vue-router

配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import Products from './views/Products.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

修改菜单组件

<template>
  <div>
    <ul>
      <li v-for="item in menuItems" :key="item.id">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, name: '首页', path: '/' },
        { id: 2, name: '产品', path: '/products' },
        { id: 3, name: '关于我们', path: '/about' }
      ]
    }
  }
}
</script>

添加样式和交互效果

可以为菜单添加一些交互效果和样式：

添加CSS样式

<style scoped>
ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.3s;
}

li:hover {
  background-color: #f5f5f5;
}

.router-link-active {
  color: #42b983;
  font-weight: bold;
}
</style>

实现嵌套菜单

对于多级菜单，可以使用递归组件实现：

创建递归菜单组件

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <div @click="toggle(item)">
        {{ item.name }}
        <span v-if="item.children && item.children.length">
          {{ item.expanded ? '▼' : '▶' }}
        </span>
      </div>
      <menu-item
        v-if="item.expanded && item.children && item.children.length"
        :items="item.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    items: Array
  },
  methods: {
    toggle(item) {
      this.$set(item, 'expanded', !item.expanded)
    }
  }
}
</script>

使用递归组件

<template>
  <div>
    <menu-item :items="menuItems" />
  </div>
</template>

<script>
import MenuItem from './MenuItem.vue'

export default {
  components: {
    MenuItem
  },
  data() {
    return {
      menuItems: [
        {
          id: 1,
          name: '首页',
          path: '/'
        },
        {
          id: 2,
          name: '产品',
          children: [
            { id: 21, name: '产品1', path: '/product1' },
            { id: 22, name: '产品2', path: '/product2' }
          ]
        }
      ]
    }
  }
}
</script>

vue实现菜单点击