vue组件实现页面布局

Vue组件实现页面布局的方法

使用基础组件结构

创建基础布局组件如Layout.vue，包含<header>、<main>、<footer>等插槽。通过<slot>实现内容动态注入：

<template>
  <div class="layout">
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
    <footer><slot name="footer"></slot></footer>
  </div>
</template>

动态布局切换

通过v-if或动态组件<component :is="">实现多套布局切换。定义不同布局组件如AdminLayout.vue和UserLayout.vue，在路由配置中指定：

// router.js
{
  path: '/admin',
  component: () => import('@/layouts/AdminLayout.vue'),
  children: [...]
}

响应式设计

结合CSS Grid/Flexbox和Vue的响应式数据实现自适应布局。使用window.innerWidth监听屏幕变化：

<script>
export default {
  data() {
    return {
      isMobile: window.innerWidth < 768
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.isMobile = window.innerWidth < 768
    }
  }
}
</script>

第三方UI库集成

使用Element UI/ANTD Vue等库快速搭建布局。例如Element UI的容器组件：

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

布局状态管理

复杂布局建议使用Vuex/Pinia管理状态。例如侧边栏折叠状态：

// store.js
state: {
  isCollapse: false
},
mutations: {
  toggleCollapse(state) {
    state.isCollapse = !state.isCollapse
  }
}

样式作用域控制

使用scoped样式或CSS Modules避免样式污染。推荐BEM命名规范：

<style scoped>
.layout__header {
  height: 60px;
}
</style>

性能优化

对静态布局组件使用v-once，动态部分使用<keep-alive>缓存：

<template>
  <div v-once>Static Layout</div>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>