当前位置：首页 > VUE

vue 实现页面内菜单

2026-01-22 16:32:46VUE

实现页面内菜单的方法

在Vue中实现页面内菜单可以通过多种方式完成，以下是几种常见的方法：

使用Vue Router实现导航菜单

通过Vue Router可以轻松实现页面内的导航菜单。创建一个包含路由链接的组件，用于在不同视图间切换。

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link to="/contact">联系</router-link>
  </nav>
  <router-view/>
</template>

在路由配置文件中定义对应的路由：

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

使用动态组件实现选项卡菜单

对于不需要改变URL的页面内菜单，可以使用动态组件实现选项卡切换效果。

<template>
  <div>
    <button @click="currentTab = 'Home'">首页</button>
    <button @click="currentTab = 'About'">关于</button>
    <button @click="currentTab = 'Contact'">联系</button>

    <component :is="currentTab"/>
  </div>
</template>

<script>
import Home from './Home.vue'
import About from './About.vue'
import Contact from './Contact.vue'

export default {
  components: { Home, About, Contact },
  data() {
    return {
      currentTab: 'Home'
    }
  }
}
</script>

使用UI框架的菜单组件

许多流行的Vue UI框架都提供了现成的菜单组件，如Element UI、Vuetify等。

以Element UI为例：

<template>
  <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">首页</el-menu-item>
    <el-submenu index="2">
      <template #title>产品</template>
      <el-menu-item index="2-1">产品1</el-menu-item>
      <el-menu-item index="2-2">产品2</el-menu-item>
    </el-submenu>
    <el-menu-item index="3">关于</el-menu-item>
  </el-menu>
</template>

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

实现响应式侧边栏菜单

对于移动端友好的侧边栏菜单，可以结合CSS和Vue的状态管理来实现。

<template>
  <div class="sidebar" :class="{ 'active': isActive }">
    <a href="#">首页</a>
    <a href="#">关于</a>
    <a href="#">联系</a>
  </div>
  <button @click="toggleMenu">菜单</button>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    toggleMenu() {
      this.isActive = !this.isActive
    }
  }
}
</script>

<style>
.sidebar {
  width: 250px;
  height: 100vh;
  position: fixed;
  left: -250px;
  transition: 0.3s;
}
.sidebar.active {
  left: 0;
}
</style>

使用Vuex管理菜单状态

对于大型应用，可以使用Vuex来集中管理菜单的状态。

// store.js
export default new Vuex.Store({
  state: {
    menuItems: [
      { id: 1, name: '首页', path: '/' },
      { id: 2, name: '关于', path: '/about' },
      { id: 3, name: '联系', path: '/contact' }
    ],
    activeMenuItem: 1
  },
  mutations: {
    setActiveMenuItem(state, id) {
      state.activeMenuItem = id
    }
  }
})

然后在组件中使用：

<template>
  <nav>
    <a v-for="item in menuItems" 
       :key="item.id" 
       :class="{ 'active': item.id === activeMenuItem }"
       @click="selectItem(item.id)">
      {{ item.name }}
    </a>
  </nav>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['menuItems', 'activeMenuItem'])
  },
  methods: {
    ...mapMutations(['setActiveMenuItem']),
    selectItem(id) {
      this.setActiveMenuItem(id)
    }
  }
}
</script>

以上方法可以根据具体需求选择或组合使用，实现功能完善、用户体验良好的页面内菜单系统。

vue 实现页面内菜单