当前位置：首页 > VUE

vue实现头部导航

2026-03-09 10:22:57VUE

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 示例

vue实现头部导航

<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>