vue如何实现公共布局

公共布局的实现方式

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

使用嵌套路由

在路由配置中定义公共布局组件作为父路由，子路由渲染不同内容：

// router.js
const routes = [
  {
    path: '/',
    component: Layout, // 公共布局组件
    children: [
      { path: '', component: Home },
      { path: 'about', component: About }
    ]
  }
]

布局组件模板需包含<router-view>占位：

<!-- Layout.vue -->
<template>
  <div>
    <header>公共头部</header>
    <main>
      <router-view></router-view>
    </main>
    <footer>公共底部</footer>
  </div>
</template>

使用插槽技术

创建布局组件时定义插槽，允许内容动态注入：

<!-- Layout.vue -->
<template>
  <div class="layout">
    <slot name="header"></slot>
    <slot></slot> <!-- 默认插槽 -->
    <slot name="footer"></slot>
  </div>
</template>

使用布局时按需填充内容：

<template>
  <Layout>
    <template #header>自定义头部</template>
    <main>页面主要内容</main>
    <template #footer>自定义底部</template>
  </Layout>
</template>

使用渲染函数

对于需要更灵活控制的场景，可以使用渲染函数动态生成布局：

// Layout.vue
export default {
  render(h) {
    return h('div', [
      h('header', this.$slots.header),
      h('main', this.$slots.default),
      h('footer', this.$slots.footer)
    ])
  }
}

全局注册布局组件

将布局组件全局注册以便在任何地方使用：

// main.js
import Layout from './components/Layout.vue'

Vue.component('AppLayout', Layout)

动态布局切换

通过路由元信息或状态管理实现不同布局切换：

// router.js
{
  path: '/admin',
  component: AdminLayout,
  meta: { layout: 'admin' }
}

在根组件中动态渲染布局：

<template>
  <component :is="`${$route.meta.layout || 'default'}-layout`"/>
</template>

每种方法适用于不同场景，嵌套路由适合路由级公共布局，插槽技术提供更高灵活性，渲染函数适合复杂逻辑，全局注册简化组件调用。