当前位置：首页 > VUE

vue实现头部导航

2026-03-29 22:03:59VUE

安装Vue.js

确保项目已安装Vue.js。可以通过以下命令安装：

npm install vue

创建导航组件

在components文件夹下创建Header.vue文件，定义导航栏结构和样式。

<template>
  <header class="header">
    <nav class="nav">
      <router-link to="/" class="nav-item">首页</router-link>
      <router-link to="/about" class="nav-item">关于</router-link>
      <router-link to="/contact" class="nav-item">联系我们</router-link>
    </nav>
  </header>
</template>

<script>
export default {
  name: 'Header'
}
</script>

<style scoped>
.header {
  background-color: #333;
  padding: 1rem;
}
.nav {
  display: flex;
  gap: 1rem;
}
.nav-item {
  color: white;
  text-decoration: none;
}
.nav-item:hover {
  text-decoration: underline;
}
</style>

引入Vue Router

确保项目已安装vue-router，用于实现页面导航功能。

npm install vue-router

在main.js或router/index.js中配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Contact from '../views/Contact.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在主组件中使用导航

在App.vue中引入并注册Header组件。

<template>
  <div id="app">
    <Header />
    <router-view />
  </div>
</template>

<script>
import Header from './components/Header.vue'

export default {
  components: {
    Header
  }
}
</script>

响应式设计

通过媒体查询实现导航栏在小屏幕设备上的适配。

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    gap: 0.5rem;
  }
}

动态导航项

通过v-for动态渲染导航项，便于后期维护。

<template>
  <nav class="nav">
    <router-link 
      v-for="item in navItems" 
      :key="item.path" 
      :to="item.path" 
      class="nav-item"
    >
      {{ item.name }}
    </router-link>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { path: '/', name: '首页' },
        { path: '/about', name: '关于' },
        { path: '/contact', name: '联系我们' }
      ]
    }
  }
}
</script>

高亮当前路由

使用router-link的active-class属性自动添加高亮样式。

<router-link 
  active-class="active"
  class="nav-item"
  to="/"
>
  首页
</router-link>

.active {
  font-weight: bold;
  color: #42b983;
}

添加下拉菜单

对于复杂的导航结构，可以添加下拉菜单功能。

vue实现头部导航

<template>
  <div class="dropdown">
    <button class="dropdown-toggle">更多</button>
    <div class="dropdown-menu">
      <router-link to="/services" class="dropdown-item">服务</router-link>
      <router-link to="/blog" class="dropdown-item">博客</router-link>
    </div>
  </div>
</template>

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-menu {
  display: none;
  position: absolute;
}
.dropdown:hover .dropdown-menu {
  display: block;
}
</style>