vue实现头部导航

使用 Vue 实现头部导航

基本结构

在 Vue 项目中，头部导航通常是一个独立的组件，命名为 Header.vue 或 Navbar.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>

动态路由

如果需要动态生成导航项，可以使用 v-for 遍历路由配置：

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

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

响应式设计

添加响应式菜单按钮，在小屏幕下显示折叠菜单：

<template>
  <header class="header">
    <button class="menu-button" @click="toggleMenu">菜单</button>
    <nav class="nav" :class="{ 'nav-active': isMenuOpen }">
      <router-link 
        v-for="item in navItems" 
        :key="item.path" 
        :to="item.path" 
        class="nav-item"
        @click="closeMenu"
      >
        {{ item.name }}
      </router-link>
    </nav>
  </header>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      isMenuOpen: false,
      navItems: [
        { path: '/', name: '首页' },
        { path: '/about', name: '关于' },
        { path: '/contact', name: '联系' }
      ]
    }
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen
    },
    closeMenu() {
      this.isMenuOpen = false
    }
  }
}
</script>

<style scoped>
.header {
  background-color: #333;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.menu-button {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

.nav {
  display: flex;
  gap: 1rem;
}

.nav-item {
  color: white;
  text-decoration: none;
}

.nav-item:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .menu-button {
    display: block;
  }

  .nav {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
  }

  .nav-active {
    display: flex;
  }
}
</style>

使用 Vue Router

确保项目已安装 Vue Router，并在 main.js 中配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Header from './components/Header.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

添加活动状态样式

为当前活动路由添加高亮样式：

<style scoped>
.router-link-exact-active {
  font-weight: bold;
  color: #42b983;
}
</style>

以上实现涵盖了基础导航、动态路由、响应式设计和活动状态样式，可根据项目需求进一步扩展功能。