用Cursor开发Vue项目的导航菜单

在人工智能内容学习中，用Cursor开发Vue项目的导航菜单是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

NavMenu组件需注册为NavMenu名称，集成Vue Router实现路由跳转与激活高亮，配置name属性并使用router-link，支持Iconify图标和插槽扩展以增强灵活性。

用Cursor开发Vue项目的导航菜单，需在保持响应式结构的同时，确保路由跳转、激活状态高亮、图标与文字对齐等功能正常运行，避免因组件未注册或路由配置遗漏导致菜单空白或点击无反应。

创建导航菜单基础组件

在 src/components 目录下新建 NavMenu.vue 文件。

复制以下模板代码，注意 【name 必须设为 NavMenu】，否则在父组件中通过标签引用时会失效。

<template><nav class="nav-menu"><ul><li v-for="item in menuList" :key="item.path"><a :href="item.path">{{ item.label }}</a></li></ul></nav></template><script setup>const menuList = [{ path: '/home', label: '首页' }, { path: '/about', label: '关于' }];</script><style scoped>.nav-menu ul { list-style: none; padding: 0; } .nav-menu li { margin: 8px 0; }</style>

接入Vue Router实现动态激活状态

方法一：使用 useRoute 和 useRouter 组合式 API

第一步：在 NavMenu.vue 的 <script setup> 中导入并声明：

import { useRoute, useRouter } from 'vue-router'; const route = useRoute(); const router = useRouter();

第二步：修改 menuList 数据结构，添加 name 字段（对应路由 record 的 name），并改用 <router-link> 替代原生 <a> 标签：

const menuList = [   { name: 'Home', label: '首页', icon: '?' },   { name: 'About', label: '关于', icon: 'ℹ️' } ];

第三步：将模板中的 <a> 替换为：

<router-link   v-for="item in menuList"   :key="item.name"   :to="{ name: item.name }"   class="nav-item"   active-class="active" ><span>{{ item.icon }} {{ item.label }}</span></router-link>

第四步：在 <style scoped> 中补充激活样式：

.nav-item.active { background-color: #42b883; color: white; }

【必须确保 router/index.ts 中已为 Home 和 About 路由配置了 name 属性】，否则 :to="{ name: ... }" 会跳转失败且控制台报错“Named Route 'X' is not defined”。

支持图标字体与插槽扩展

方法二：使用第三方图标库（如 Iconify）+ 插槽封装

在终端执行：npm install @iconify/vue。

在 NavMenu.vue 中顶部导入： import { Icon } from '@iconify/vue';

将菜单项中的 icon 字段改为 Iconify 图标名，例如： { name: 'Home', label: '首页', icon: 'mdi:home' }

模板中渲染图标部分改为： <Icon icon="item.icon" class="menu-icon" />

添加插槽支持，在 <template> 中的 <router-link> 内部插入： <slot name="item" :item="item"><span>{{ item.icon }} {{ item.label }}</span></slot>

这样父组件就能自定义每项内容，比如加 badge 或切换按钮。