vue横导航栏实现
Vue 横向导航栏实现方法
使用 v-for 动态生成导航项
通过 Vue 的 v-for 指令可以动态渲染导航菜单项，数据通常存储在组件的 data 属性中：
<template>
<nav class="horizontal-nav">
<ul>
<li v-for="item in navItems" :key="item.id">
<a :href="item.link">{{ item.text }}</a>
</li>
</ul>
</nav>
</template>
<script>
export default {
data() {
return {
navItems: [
{ id: 1, text: '首页', link: '/' },
{ id: 2, text: '产品', link: '/products' },
{ id: 3, text: '关于', link: '/about' }
]
}
}
}
</script>
<style scoped>
.horizontal-nav ul {
display: flex;
list-style: none;
padding: 0;
}
.horizontal-nav li {
margin-right: 20px;
}
.horizontal-nav a {
text-decoration: none;
color: #333;
}
</style>响应式设计实现
添加媒体查询使导航栏在不同屏幕尺寸下自适应：
@media (max-width: 768px) {
.horizontal-nav ul {
flex-direction: column;
}
.horizontal-nav li {
margin-right: 0;
margin-bottom: 10px;
}
}使用 Vue Router 实现路由导航
当项目使用 Vue Router 时，可以用 <router-link> 替代常规 <a> 标签：
<router-link
v-for="item in navItems"
:key="item.id"
:to="item.link"
active-class="active"
>
{{ item.text }}
</router-link>添加交互效果
通过 Vue 的 @mouseenter 和 @mouseleave 实现悬停效果：
<li
v-for="item in navItems"
:key="item.id"
@mouseenter="hoverItem = item.id"
@mouseleave="hoverItem = null"
>
<a
:href="item.link"
:class="{ 'hover-effect': hoverItem === item.id }"
>
{{ item.text }}
</a>
</li>使用 UI 框架快速实现
如使用 Element UI 可以快速构建：
<el-menu mode="horizontal">
<el-menu-item index="1">首页</el-menu-item>
<el-submenu index="2">
<template #title>产品</template>
<el-menu-item index="2-1">产品列表</el-menu-item>
</el-submenu>
</el-menu>每种方法适用于不同场景，基础实现适合轻量级应用，UI 框架方案适合需要快速开发的中大型项目。
