vue导航栏实现

Vue 导航栏实现方法

基础组件结构

使用 Vue Router 和自定义组件构建导航栏。创建一个 NavBar.vue 文件，包含路由链接和基础样式：

<template>
  <nav class="navbar">
    <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>
</template>

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

<style scoped>
.navbar {
  display: flex;
  padding: 1rem;
  background-color: #f8f9fa;
}
.nav-item {
  margin-right: 1rem;
  text-decoration: none;
  color: #333;
}
.nav-item:hover {
  color: #007bff;
}
</style>

动态路由高亮

通过 Vue Router 的 active-class 实现当前路由高亮显示：

<router-link 
  to="/about" 
  class="nav-item"
  active-class="active-link">
  关于
</router-link>

<style scoped>
.active-link {
  font-weight: bold;
  color: #007bff;
}
</style>

响应式设计

添加媒体查询实现移动端适配：

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

状态管理集成

结合 Vuex 实现登录状态显示不同的导航项：

<template>
  <nav>
    <router-link to="/login" v-if="!isLoggedIn">登录</router-link>
    <router-link to="/dashboard" v-else>仪表盘</router-link>
  </nav>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['isLoggedIn'])
  }
}
</script>

下拉菜单实现

使用 Vue 的 v-show 指令实现下拉功能：

<template>
  <div class="dropdown">
    <button @click="toggleDropdown">菜单</button>
    <ul v-show="isOpen">
      <li><router-link to="/item1">选项1</router-link></li>
      <li><router-link to="/item2">选项2</router-link></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>