当前位置：首页 > VUE

vue实现layout

2026-01-13 08:04:50VUE

Vue 实现 Layout 的常用方法

在 Vue 中实现页面布局（Layout）通常可以通过以下几种方式完成，每种方式适用于不同场景。

使用嵌套路由与 `<router-view>`

Vue Router 支持嵌套路由，适合需要动态切换内容的布局场景。

定义主布局组件 MainLayout.vue：

<template>
<div class="layout">
 <header>网站标题</header>
 <nav>导航栏</nav>
 <main>
   <router-view></router-view> <!-- 子路由内容将在这里渲染 -->
 </main>
 <footer>页脚信息</footer>
</div>
</template>

配置嵌套路由：

const routes = [
{
 path: '/',
 component: MainLayout,
 children: [
   { path: '', component: HomePage },
   { path: 'about', component: AboutPage }
 ]
}
]

使用插槽（Slots）实现灵活布局

通过插槽可以实现更灵活的布局组合，适合需要内容注入的场景。

创建布局组件 FlexLayout.vue：

<template>
<div class="flex-layout">
 <slot name="header"></slot>
 <div class="content">
   <slot></slot> <!-- 默认插槽 -->
 </div>
 <slot name="footer"></slot>
</div>
</template>

使用布局组件：

<template>
<FlexLayout>
 <template v-slot:header>
   <h1>自定义头部</h1>
 </template>

 <p>主要内容区域</p>

 <template v-slot:footer>
   <small>自定义页脚</small>
 </template>
</FlexLayout>
</template>

动态布局切换

通过组件动态渲染实现多套布局切换。

准备不同布局组件：


import AdminLayout from './AdminLayout.vue'
import UserLayout from './UserLayout.vue'

const layouts = { admin: AdminLayout, user: UserLayout }


2. 创建动态布局渲染器：
```vue
<template>
  <component :is="layoutComponent">
    <router-view></router-view>
  </component>
</template>

<script>
export default {
  computed: {
    layoutComponent() {
      return layouts[this.$route.meta.layout] || 'default'
    }
  }
}
</script>

路由元信息配置：

{
path: '/admin',
meta: { layout: 'admin' },
component: AdminPage
}

全局样式与布局

通过 CSS 实现基础布局结构：

/* 基础布局样式 */
.app-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }