vue实现页头页脚

实现页头和页脚的基本结构

在Vue项目中，页头和页脚通常作为全局组件存在，可以通过<header>和<footer>标签或自定义组件实现。以下是一个基础模板结构：

<template>
  <div id="app">
    <AppHeader />
    <router-view /> <!-- 主要内容区域 -->
    <AppFooter />
  </div>
</template>

<script>
import AppHeader from './components/AppHeader.vue'
import AppFooter from './components/AppFooter.vue'

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

创建页头组件

页头组件通常包含导航栏、LOGO和用户操作按钮。示例代码：

<!-- AppHeader.vue -->
<template>
  <header class="header">
    <div class="logo">Your Logo</div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
  </header>
</template>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  background-color: #f8f9fa;
}
</style>

创建页脚组件

页脚组件通常包含版权信息、联系方式等静态内容：

<!-- AppFooter.vue -->
<template>
  <footer class="footer">
    <p>© 2023 Your Company. All rights reserved.</p>
    <div class="links">
      <a href="#">Privacy Policy</a>
      <a href="#">Terms of Service</a>
    </div>
  </footer>
</template>

<style scoped>
.footer {
  padding: 1rem;
  text-align: center;
  background-color: #f8f9fa;
}
</style>

动态页头内容处理

通过Vue的props或vuex实现动态内容传递，例如用户登录状态：

<!-- AppHeader.vue -->
<template>
  <header>
    <div v-if="isLoggedIn">Welcome, {{ username }}</div>
    <button v-else @click="login">Login</button>
  </header>
</template>

<script>
export default {
  props: {
    isLoggedIn: Boolean,
    username: String
  },
  methods: {
    login() {
      // 登录逻辑
    }
  }
}
</script>

响应式布局实现

使用CSS媒体查询或Vue的响应式工具确保在不同设备上的显示效果：

/* AppHeader.vue */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
  }
}

使用插槽增强灵活性

通过插槽允许父组件自定义部分内容：

<!-- AppFooter.vue -->
<template>
  <footer>
    <slot name="copyright"></slot>
    <slot name="links"></slot>
  </footer>
</template>

父组件中使用：

<AppFooter>
  <template v-slot:copyright>
    <p>Custom Copyright Text</p>
  </template>
</AppFooter>