页头实现vue

使用 Vue.js 实现页头组件

在 Vue.js 中实现页头（Header）组件通常需要结合模板、样式和逻辑。以下是一个完整的实现方案：

创建 Header 组件文件

新建 Header.vue 文件，包含模板、脚本和样式三部分：

<template>
  <header class="header">
    <div class="logo">
      <router-link to="/">
        <img :src="logo" alt="Site Logo">
      </router-link>
    </div>
    <nav class="nav">
      <router-link 
        v-for="item in navItems" 
        :key="item.path" 
        :to="item.path"
        class="nav-link"
      >
        {{ item.text }}
      </router-link>
    </nav>
    <div class="user-actions" v-if="isAuthenticated">
      <button @click="logout">Logout</button>
    </div>
  </header>
</template>

<script>
export default {
  name: 'AppHeader',
  props: {
    logo: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      navItems: [
        { path: '/', text: 'Home' },
        { path: '/about', text: 'About' },
        { path: '/contact', text: 'Contact' }
      ],
      isAuthenticated: false
    }
  },
  methods: {
    logout() {
      // 处理登出逻辑
      this.isAuthenticated = false
    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.logo img {
  height: 40px;
}

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

.nav-link {
  text-decoration: none;
  color: #333;
}

.nav-link.router-link-exact-active {
  color: #42b983;
  font-weight: bold;
}

.user-actions button {
  padding: 0.5rem 1rem;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

在 App 中使用 Header 组件

在主组件中引入并使用 Header：

<template>
  <div id="app">
    <app-header :logo="require('@/assets/logo.png')" />
    <router-view/>
  </div>
</template>

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

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

响应式设计改进

添加媒体查询使 Header 适应移动设备：

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

  .nav {
    margin: 1rem 0;
    flex-wrap: wrap;
    justify-content: center;
  }
}

添加动态功能

可以添加导航菜单的折叠功能：

<template>
  <header class="header">
    <div class="header-content">
      <div class="logo">
        <router-link to="/">
          <img :src="logo" alt="Site Logo">
        </router-link>
      </div>
      <button class="menu-toggle" @click="toggleMenu">☰</button>
    </div>

    <nav class="nav" :class="{ 'nav-open': menuOpen }">
      <!-- 导航项 -->
    </nav>
  </header>
</template>

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

<style>
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

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

  .nav {
    display: none;
    width: 100%;
  }

  .nav-open {
    display: flex;
    flex-direction: column;
  }
}
</style>

使用 Vuex 管理状态

对于更复杂的应用，可以使用 Vuex 管理认证状态：

// store/modules/auth.js
export default {
  state: {
    isAuthenticated: false
  },
  mutations: {
    setAuth(state, status) {
      state.isAuthenticated = status
    }
  },
  actions: {
    login({ commit }) {
      commit('setAuth', true)
    },
    logout({ commit }) {
      commit('setAuth', false)
    }
  }
}

然后在 Header 组件中通过计算属性获取状态：

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('auth', ['isAuthenticated'])
  },
  methods: {
    ...mapActions('auth', ['logout'])
  }
}
</script>

这些实现方式可以根据具体项目需求进行调整和扩展。