vue实现公共header
Vue 实现公共 Header 的方法
使用组件化方式创建公共 Header
在 Vue 项目中，可以将 Header 设计为一个独立的组件，方便在不同页面中复用。创建一个 Header.vue 文件，定义 Header 的结构和样式。
<template>
<header class="header">
<div class="logo">Your Logo</div>
<nav class="nav">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
</header>
</template>
<script>
export default {
name: 'Header'
}
</script>
<style scoped>
.header {
display: flex;
justify-content: space-between;
padding: 1rem;
background-color: #f8f9fa;
}
.nav a {
margin: 0 1rem;
}
</style>在主布局文件中引入 Header 组件
在 App.vue 或其他布局文件中引入 Header 组件，确保它在所有页面中显示。
<template>
<div id="app">
<Header />
<router-view />
</div>
</template>
<script>
import Header from './components/Header.vue'
export default {
components: {
Header
}
}
</script>使用 Vue Router 实现导航
确保项目中已安装 Vue Router，并在 Header 组件中使用 <router-link> 实现页面导航。在 router/index.js 中配置路由。
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router动态 Header 内容
如果需要根据页面状态动态修改 Header 内容，可以通过 props 或 Vuex 实现。例如，通过 props 传递标题。
<template>
<header class="header">
<div class="title">{{ title }}</div>
</header>
</template>
<script>
export default {
props: {
title: String
}
}
</script>在父组件中传递动态标题：
<template>
<Header title="Home Page" />
</template>响应式设计
使用 CSS 媒体查询或 Vue 的响应式工具（如 v-if 或 v-show）实现 Header 在不同设备上的适配。
<template>
<header class="header">
<div class="desktop-nav" v-if="!isMobile">
<router-link to="/">Home</router-link>
</div>
<button class="mobile-menu" v-else @click="toggleMenu">Menu</button>
</header>
</template>
<script>
export default {
data() {
return {
isMobile: false
}
},
mounted() {
this.checkScreenSize()
window.addEventListener('resize', this.checkScreenSize)
},
methods: {
checkScreenSize() {
this.isMobile = window.innerWidth < 768
},
toggleMenu() {
// 处理菜单展开逻辑
}
}
}
</script>全局状态管理
对于需要跨组件共享的状态（如用户登录信息），可以使用 Vuex 或 Pinia 管理 Header 中的数据。
// store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
user: null
},
mutations: {
setUser(state, user) {
state.user = user
}
}
})在 Header 组件中使用状态：
<template>
<header>
<div v-if="$store.state.user">Welcome, {{ $store.state.user.name }}</div>
</header>
</template>通过以上方法，可以高效实现 Vue 项目中的公共 Header，并确保其可维护性和扩展性。
