vue 实现顶部导航栏

Vue 实现顶部导航栏的方法

使用 Vue Router 实现导航

在 Vue 项目中，可以通过 Vue Router 实现顶部导航栏的功能。创建一个 NavBar.vue 组件，包含路由链接。

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

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

<style scoped>
.navbar {
  background-color: #333;
  padding: 1rem;
}

.navbar a {
  color: white;
  margin-right: 1rem;
  text-decoration: none;
}

.navbar a:hover {
  text-decoration: underline;
}

.router-link-active {
  font-weight: bold;
}
</style>

动态生成导航菜单

如果导航菜单项是动态的，可以通过 v-for 循环生成路由链接。

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

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

响应式导航栏

通过 Vue 的响应式特性，可以实现移动端友好的导航栏，例如汉堡菜单。

<template>
  <nav class="navbar">
    <div class="navbar-brand" @click="toggleMenu">
      <span>网站Logo</span>
      <button class="hamburger">☰</button>
    </div>
    <div class="navbar-links" :class="{ 'active': isMenuOpen }">
      <router-link 
        v-for="item in menuItems" 
        :key="item.path" 
        :to="item.path"
        @click="closeMenu"
      >
        {{ item.name }}
      </router-link>
    </div>
  </nav>
</template>

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

<style scoped>
.navbar {
  display: flex;
  flex-direction: column;
  background-color: #333;
}

.navbar-brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  color: white;
}

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

.navbar-links {
  display: none;
  flex-direction: column;
  padding: 0 1rem;
}

.navbar-links.active {
  display: flex;
}

.navbar-links a {
  color: white;
  padding: 0.5rem 0;
  text-decoration: none;
}

.navbar-links a:hover {
  background-color: #555;
}

@media (min-width: 768px) {
  .navbar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .hamburger {
    display: none;
  }

  .navbar-links {
    display: flex;
    flex-direction: row;
  }

  .navbar-links a {
    margin-left: 1rem;
  }
}
</style>

使用 UI 框架快速实现

如果项目使用了 UI 框架如 Element UI 或 Vuetify，可以更快速地实现导航栏。

Element UI 示例：

<template>
  <el-menu
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-menu-item index="1">
      <router-link to="/">首页</router-link>
    </el-menu-item>
    <el-menu-item index="2">
      <router-link to="/about">关于</router-link>
    </el-menu-item>
    <el-menu-item index="3">
      <router-link to="/contact">联系我们</router-link>
    </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 color="primary" dark>
    <v-toolbar-title>网站标题</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn text to="/">首页</v-btn>
    <v-btn text to="/about">关于</v-btn>
    <v-btn text to="/contact">联系我们</v-btn>
  </v-app-bar>
</template>

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

这些方法提供了从基础到高级的 Vue 顶部导航栏实现方案，可以根据项目需求选择合适的实现方式。