当前位置：首页 > VUE

vue实现菜单导航

2026-01-17 21:36:07VUE

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: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
]

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

export default router

在主入口文件（如 main.js）中引入并使用路由：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

在组件模板中使用 <router-link> 和 <router-view>：

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

动态生成菜单项

创建菜单数据源（如 menuItems.js）：

export default [
  { path: '/', name: '首页' },
  { path: '/products', name: '产品' },
  { path: '/services', name: '服务' },
  { path: '/contact', name: '联系我们' }
]

在导航组件中动态渲染菜单：

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

<script>
import menuItems from '@/data/menuItems'

export default {
  data() {
    return {
      menuItems
    }
  }
}
</script>

嵌套路由实现多级菜单

配置嵌套路由：

const routes = [
  {
    path: '/products',
    component: ProductsLayout,
    children: [
      { path: '', component: ProductList },
      { path: ':id', component: ProductDetail }
    ]
  }
]

在父组件中渲染子路由：

<template>
  <div class="products-layout">
    <nav>
      <router-link to="/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>

使用 Vuex 管理菜单状态

创建 Vuex store 管理菜单状态：

import { createStore } from 'vuex'

export default createStore({
  state: {
    menuItems: [
      { path: '/', name: 'Home' },
      { path: '/about', name: 'About' }
    ],
    isMenuOpen: false
  },
  mutations: {
    toggleMenu(state) {
      state.isMenuOpen = !state.isMenuOpen
    }
  }
})

在组件中使用和修改菜单状态：

<template>
  <button @click="toggleMenu">菜单</button>
  <nav v-show="isMenuOpen">
    <router-link 
      v-for="item in menuItems"
      :key="item.path"
      :to="item.path"
    >
      {{ item.name }}
    </router-link>
  </nav>
</template>

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

export default {
  computed: {
    ...mapState(['menuItems', 'isMenuOpen'])
  },
  methods: {
    ...mapMutations(['toggleMenu'])
  }
}
</script>

响应式菜单实现

添加 CSS 实现响应式效果：

nav {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  nav {
    flex-direction: row;
  }
}

使用 Vue 的 computed 属性根据屏幕宽度调整菜单：

export default {
  data() {
    return {
      windowWidth: window.innerWidth
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize)
  },
  computed: {
    isMobile() {
      return this.windowWidth < 768
    }
  },
  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth
    }
  }
}

添加菜单动画效果

使用 Vue 的过渡组件实现动画：

<transition name="slide">
  <nav v-show="isMenuOpen">
    <!-- 菜单内容 -->
  </nav>
</transition>

添加对应的 CSS 过渡样式：

.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter-from, .slide-leave-to {
  transform: translateX(-100%);
}

vue实现菜单导航