当前位置：首页 > VUE

vue实现导航菜单

2026-01-15 02:36:36VUE

Vue 实现导航菜单的方法

使用 Vue Router 实现基本导航

在 Vue 项目中安装 vue-router，通过路由配置实现页面跳转。路由配置文件中定义路径和组件映射，导航菜单通过 <router-link> 实现跳转。

// 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;

<!-- 导航菜单组件 -->
<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

动态生成导航菜单

通过遍历路由配置动态生成菜单项，适合路由较多或需要权限控制的场景。

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

<script>
export default {
  data() {
    return {
      routes: [
        { path: '/', name: 'Home' },
        { path: '/about', name: 'About' }
      ]
    };
  }
};
</script>

嵌套导航菜单

通过递归组件或嵌套路由实现多级菜单，适用于复杂布局。

<template>
  <div v-for="item in menuItems" :key="item.title">
    <router-link v-if="!item.children" :to="item.path">
      {{ item.title }}
    </router-link>
    <div v-else>
      <span>{{ item.title }}</span>
      <NavMenu :menuItems="item.children" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavMenu',
  props: {
    menuItems: Array
  }
};
</script>

响应式导航菜单

结合 CSS 媒体查询或状态管理工具（如 Vuex）实现移动端折叠菜单。

<template>
  <button @click="toggleMenu">Toggle Menu</button>
  <nav :class="{ 'hidden': !isMenuOpen }">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

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

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

高亮当前菜单项

通过 router-link 的 active-class 属性或计算当前路由匹配实现高亮效果。

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

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

结合 UI 框架实现

使用 Element UI、Ant Design Vue 等现成组件库快速实现导航菜单。

vue实现导航菜单

<template>
  <el-menu mode="horizontal" router>
    <el-menu-item index="/">Home</el-menu-item>
    <el-menu-item index="/about">About</el-menu-item>
  </el-menu>
</template>

<script>
import { ElMenu, ElMenuItem } from 'element-plus';

export default {
  components: {
    ElMenu,
    ElMenuItem
  }
};
</script>