vue实现导航栏切图

实现导航栏的基本结构

使用Vue的模板语法构建导航栏的HTML结构，通常包含一个<nav>标签和多个<router-link>或<a>标签。示例代码如下：

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

添加样式与布局

通过CSS为导航栏添加样式，例如水平布局、悬停效果和响应式设计。以下是一个基础样式示例：

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

.nav-item {
  color: white;
  text-decoration: none;
  margin: 0 1rem;
  padding: 0.5rem;
}

.nav-item:hover {
  background-color: #555;
  border-radius: 4px;
}

.router-link-active {
  font-weight: bold;
  border-bottom: 2px solid #42b983;
}
</style>

响应式设计与折叠菜单

对于移动端，可以通过Vue的动态类和事件处理实现折叠菜单。使用v-bind:class和v-on:click控制菜单状态：

<template>
  <nav class="navbar" :class="{ 'mobile-active': isMobileMenuOpen }">
    <button @click="toggleMobileMenu" class="menu-button">☰</button>
    <div class="nav-items">
      <router-link to="/" class="nav-item">首页</router-link>
      <router-link to="/about" class="nav-item">关于</router-link>
    </div>
  </nav>
</template>

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

动态高亮当前路由

利用Vue Router的route对象动态高亮当前选中的导航项。通过计算属性或直接绑定active-class：

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

集成状态管理（可选）

对于复杂导航栏（如用户登录状态切换），可以集成Vuex管理状态。示例逻辑：

computed: {
  isLoggedIn() {
    return this.$store.state.user.isLoggedIn;
  }
}

动画与过渡效果

使用Vue的<transition>组件为导航栏添加平滑的动画效果：

<transition name="fade">
  <div class="mobile-menu" v-if="isMobileMenuOpen">
    <!-- 菜单内容 -->
  </div>
</transition>

配套CSS：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}