vue3顶部导航栏菜单

### 实现 Vue3 顶部导航栏菜单 在 Vue3 中创建顶部导航栏菜单可以通过组合 API 和组件化的方式完成。下面是一个简单的例子来展示如何构建这样的导航栏。 #### 导航栏组件结构设计 为了使导航栏具备良好的扩展性和维护性，可以将其拆分为更小的功能单元，比如 `NavMenu` 组件用于表示整个导航条目集合；`NavItem` 表示单个导航项[^3]。 ```html <!-- NavMenu.vue --> <template> <nav class="navbar"> <ul class="menu-list"> <NavItem v-for="(item, index) in items" :key="index" :label="item.label"/> </ul> </nav> </template> <script setup> import { ref } from 'vue'; import NavItem from './NavItem.vue'; const items = ref([ { label: "首页", link: "/" }, { label: "产品", link: "/products" }, { label: "关于我们", link: "/about-us" } ]); </script> <style scoped> .navbar { background-color: #f8f9fa; } .menu-list { list-style-type: none; } </style> ``` ```html <!-- NavItem.vue --> <template> <li><a href="#" @click.prevent="$emit('select', label)" :class="{ active: isActive }">{{ label }}</a></li> </template> <script setup> defineProps({ label: String, }); defineEmits(['select']); </script> <style scoped> .active a { color: blue; } </style> ``` 此代码片段展示了基本的 HTML 结构和样式设置，并通过 props 将数据传递给子组件 `NavItem` 来渲染各个菜单选项[^1]。 对于希望增加更多互动效果的情况，如吸顶导航交互，则可以在父级容器监听滚动事件并动态调整 CSS 类名以改变其位置属性[^2]： ```javascript // 在 NavMenu.vue 的 script 部分加入如下逻辑 mounted() { window.addEventListener('scroll', this.handleScroll); }, methods: { handleScroll(event){ const navBarEl = document.querySelector('.navbar'); if (window.scrollY > 50){ // 当页面向下滚动超过一定距离时触发固定定位 navBarEl.classList.add('fixed-top'); }else{ navBarEl.classList.remove('fixed-top'); } } }, beforeUnmount(){ window.removeEventListener('scroll',this.handleScroll); } ``` 同时还需要相应地补充一些额外的CSS规则来支持这种行为: ```css .fixed-top { position: fixed !important; top: 0; width: 100%; z-index: 1030; /* 确保覆盖其他内容 */ } ``` 上述方法实现了基础版本的顶部导航栏，在实际项目开发过程中还可以进一步增强功能，例如集成 Vuex 或 Pinia 进行状态管理，或是利用 Vue Router 处理页面跳转等问题[^4]。