vue如何实现页面布局

Vue 页面布局实现方法

Vue 提供了多种方式实现页面布局，以下是一些常见方法：

使用组件化布局 将页面拆分为多个组件，例如头部、侧边栏、内容区和底部。通过组合这些组件实现布局。

<template>
  <div class="layout">
    <Header />
    <div class="main">
      <Sidebar />
      <Content />
    </div>
    <Footer />
  </div>
</template>

CSS Flexbox 布局 利用 Flexbox 的弹性布局特性可以轻松实现各种页面结构。

<style>
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main {
  display: flex;
  flex: 1;
}
</style>

CSS Grid 布局 Grid 布局适合更复杂的二维布局需求。

<style>
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
}
</style>

使用 UI 框架 Element UI、Ant Design Vue 等框架提供了现成的布局组件。

<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-footer>Footer</el-footer>
  </el-container>
</template>

动态布局 通过 Vue 的响应式特性实现动态布局调整。

<template>
  <div :class="['layout', { 'mobile-layout': isMobile }]">
    <!-- 布局内容 -->
  </div>
</template>

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

路由级布局 通过 Vue Router 实现不同路由使用不同布局。

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: AdminLayout,
      children: [...]
    },
    {
      path: '/',
      component: MainLayout,
      children: [...]
    }
  ]
})

命名视图 Vue Router 的命名视图功能允许多个视图同时展示。

<router-view name="header"></router-view>
<router-view></router-view>
<router-view name="footer"></router-view>