页头实现vue

使用 Vue.js 实现页头（Header）

在 Vue.js 中实现页头（Header）可以通过组件化的方式完成。以下是一个常见的实现方法：

创建 Header 组件

在 components 文件夹中新建一个 Header.vue 文件，内容如下：

<template>
  <header class="header">
    <div class="logo">
      <router-link to="/">Your Logo</router-link>
    </div>
    <nav class="nav">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </nav>
  </header>
</template>

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

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

.logo a {
  font-weight: bold;
  font-size: 1.5rem;
  color: #333;
  text-decoration: none;
}

.nav a {
  margin-left: 1rem;
  color: #333;
  text-decoration: none;
}

.nav a:hover {
  color: #007bff;
}
</style>

在主应用中使用 Header 组件

在 App.vue 或其他主要布局文件中引入并使用 Header 组件：

<template>
  <div id="app">
    <Header />
    <router-view />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    Header
  }
}
</script>

响应式页头实现

对于移动设备，可以添加响应式设计：

<template>
  <header class="header">
    <div class="logo">
      <router-link to="/">Your Logo</router-link>
    </div>
    <button class="menu-button" @click="toggleMenu">☰</button>
    <nav class="nav" :class="{ 'active': isMenuOpen }">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </nav>
  </header>
</template>

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

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

.logo a {
  font-weight: bold;
  font-size: 1.5rem;
  color: #333;
  text-decoration: none;
}

.nav a {
  margin-left: 1rem;
  color: #333;
  text-decoration: none;
}

.nav a:hover {
  color: #007bff;
}

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

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

  .nav {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background-color: #f8f9fa;
    flex-direction: column;
    padding: 1rem;
  }

  .nav.active {
    display: flex;
  }

  .nav a {
    margin: 0.5rem 0;
  }
}
</style>

使用 Vuex 管理页头状态

如果需要全局状态管理（如用户登录状态），可以结合 Vuex：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isLoggedIn: false
  },
  mutations: {
    setLoginStatus(state, status) {
      state.isLoggedIn = status
    }
  },
  actions: {
    login({ commit }) {
      commit('setLoginStatus', true)
    },
    logout({ commit }) {
      commit('setLoginStatus', false)
    }
  }
})

然后在 Header 组件中使用：

<template>
  <header class="header">
    <div class="logo">
      <router-link to="/">Your Logo</router-link>
    </div>
    <nav class="nav">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link v-if="!isLoggedIn" to="/login">Login</router-link>
      <button v-else @click="logout">Logout</button>
    </nav>
  </header>
</template>

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

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

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