NavMenu组件需注册为NavMenu名称，集成Vue Router实现路由跳转与激活高亮，配置name属性并使用router-link，支持Iconify图标和插槽扩展以增强灵活性。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用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 或切换按钮。
