vue实现头部导航
Vue 实现头部导航的方法
使用 Vue Router 实现导航
在 Vue 项目中，可以通过 Vue Router 实现头部导航。创建一个导航组件，使用 <router-link> 标签实现路由跳转。
<template>
<nav>
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
<router-link to="/contact">联系我们</router-link>
</nav>
</template>
<script>
export default {
name: 'HeaderNav'
}
</script>
<style scoped>
nav {
display: flex;
gap: 1rem;
padding: 1rem;
background: #f0f0f0;
}
</style>动态生成导航菜单
如果需要动态生成导航菜单，可以从 Vuex 或 API 获取菜单数据，通过 v-for 循环渲染。
<template>
<nav>
<router-link
v-for="item in menuItems"
:key="item.path"
:to="item.path"
>
{{ item.name }}
</router-link>
</nav>
</template>
<script>
export default {
name: 'HeaderNav',
data() {
return {
menuItems: [
{ path: '/', name: '首页' },
{ path: '/about', name: '关于' },
{ path: '/contact', name: '联系我们' }
]
}
}
}
</script>响应式导航栏
在移动端可以通过添加汉堡菜单实现响应式导航栏。
<template>
<div class="navbar">
<button @click="toggleMenu">☰</button>
<div class="nav-links" :class="{ 'active': isMenuOpen }">
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
<router-link to="/contact">联系我们</router-link>
</div>
</div>
</template>
<script>
export default {
name: 'HeaderNav',
data() {
return {
isMenuOpen: false
}
},
methods: {
toggleMenu() {
this.isMenuOpen = !this.isMenuOpen
}
}
}
</script>
<style scoped>
.navbar {
display: flex;
flex-direction: column;
}
.nav-links {
display: none;
}
.nav-links.active {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.nav-links {
display: flex;
flex-direction: row;
}
button {
display: none;
}
}
</style>使用 UI 框架实现导航
如果项目中使用 UI 框架如 Element UI 或 Vuetify，可以直接使用其提供的导航组件。
Element UI 示例
<template>
<el-menu mode="horizontal" router>
<el-menu-item index="/">首页</el-menu-item>
<el-menu-item index="/about">关于</el-menu-item>
<el-menu-item index="/contact">联系我们</el-menu-item>
</el-menu>
</template>
<script>
import { ElMenu, ElMenuItem } from 'element-plus'
export default {
components: { ElMenu, ElMenuItem }
}
</script>Vuetify 示例
<template>
<v-app-bar app>
<v-toolbar-items>
<v-btn to="/" text>首页</v-btn>
<v-btn to="/about" text>关于</v-btn>
<v-btn to="/contact" text>联系我们</v-btn>
</v-toolbar-items>
</v-app-bar>
</template>
<script>
export default {
name: 'HeaderNav'
}
</script>
