当前位置：首页 > VUE

vue实现页头页脚

2026-02-22 23:23:14VUE

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

在Vue项目中，页头和页脚通常作为全局组件存在，放置在App.vue或通过路由布局统一管理。以下是一个基础实现示例：

目录结构建议

src/
├── components/
│   ├── Header.vue
│   └── Footer.vue
├── App.vue

Header.vue 示例

<template>
  <header class="app-header">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
  </header>
</template>

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

<style scoped>
.app-header {
  background-color: #333;
  padding: 1rem;
  color: white;
}
</style>

Footer.vue 示例

<template>
  <footer class="app-footer">
    <p>&copy; 2023 Your Company</p>
  </footer>
</template>

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

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

全局注册组件方式

在App.vue中引入并固定显示页头页脚：

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

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

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

动态页头页脚控制

如果需要根据不同页面隐藏页脚（如登录页），可通过路由元信息控制：

router/index.js 配置

{
  path: '/login',
  component: Login,
  meta: { hideFooter: true }
}

App.vue 修改

<template>
  <div id="app">
    <AppHeader />
    <router-view />
    <AppFooter v-if="!$route.meta.hideFooter" />
  </div>
</template>

使用插槽增强灵活性

在需要自定义内容的场景，可以使用插槽：

Header.vue 修改

<template>
  <header>
    <slot name="left"></slot>
    <slot></slot> <!-- 默认插槽 -->
    <slot name="right"></slot>
  </header>
</template>

使用示例

<AppHeader>
  <template #left>
    <button @click="toggleSidebar">Menu</button>
  </template>
  <h1>Page Title</h1>
</AppHeader>

响应式设计建议

通过CSS媒体查询适配不同屏幕尺寸：

/* Header.vue 样式补充 */
@media (max-width: 768px) {
  .app-header nav {
    flex-direction: column;
  }
}

状态管理集成

当需要全局控制页头状态（如用户登录信息），可结合Vuex：

// store/modules/app.js
export default {
  state: {
    headerTitle: 'Default Title'
  },
  mutations: {
    SET_HEADER_TITLE(state, title) {
      state.headerTitle = title
    }
  }
}

Header.vue 调用

vue实现页头页脚

<template>
  <header>
    <h1>{{ headerTitle }}</h1>
  </header>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['headerTitle'])
  }
}
</script>