vue实现layout

Vue 实现 Layout 布局

在 Vue 中实现 Layout 布局通常涉及使用嵌套路由、动态组件或插槽机制。以下是几种常见的方法：

使用嵌套路由

通过 Vue Router 的嵌套路由功能，可以轻松实现 Layout 布局。定义一个基础布局组件，并在子路由中动态加载内容。

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Layout from '@/components/Layout';
import Home from '@/views/Home';
import About from '@/views/About';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        { path: '', component: Home },
        { path: 'about', component: About },
      ],
    },
  ],
});

<!-- Layout.vue -->
<template>
  <div class="layout">
    <header>
      <h1>App Header</h1>
    </header>
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <p>App Footer</p>
    </footer>
  </div>
</template>

使用插槽

通过插槽机制，可以在父组件中定义布局结构，子组件填充内容。

<!-- Layout.vue -->
<template>
  <div class="layout">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<!-- Home.vue -->
<template>
  <Layout>
    <template v-slot:header>
      <h1>Custom Header</h1>
    </template>
    <p>Main content goes here.</p>
    <template v-slot:footer>
      <p>Custom Footer</p>
    </template>
  </Layout>
</template>

使用动态组件

通过动态组件切换不同的布局或内容区域。

<template>
  <div class="app">
    <component :is="currentLayout">
      <router-view></router-view>
    </component>
  </div>
</template>

<script>
import DefaultLayout from '@/layouts/DefaultLayout';
import AdminLayout from '@/layouts/AdminLayout';

export default {
  computed: {
    currentLayout() {
      return this.$route.meta.layout || 'DefaultLayout';
    },
  },
  components: {
    DefaultLayout,
    AdminLayout,
  },
};
</script>

使用 CSS Grid 或 Flexbox

结合 CSS Grid 或 Flexbox 可以轻松实现响应式布局。

<template>
  <div class="layout">
    <header>Header</header>
    <aside>Sidebar</aside>
    <main>Main Content</main>
    <footer>Footer</footer>
  </div>
</template>

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

header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
</style>

使用第三方库

可以借助第三方库如 vue-grid-layout 或 vuetify 快速实现复杂布局。

<template>
  <v-app>
    <v-navigation-drawer v-model="drawer" app>
      <!-- Sidebar content -->
    </v-navigation-drawer>
    <v-app-bar app>
      <!-- Header content -->
    </v-app-bar>
    <v-main>
      <!-- Main content -->
    </v-main>
    <v-footer app>
      <!-- Footer content -->
    </v-footer>
  </v-app>
</template>

以上方法可以根据项目需求灵活组合使用，实现高效且可维护的布局结构。