# 应用布局

项目默认的布局采用了侧边栏(左) + 操作栏(顶部) + 抽屉面板(右)的形式。同时加入了支持单页面路由切换的标签页。

若需要扩展内置布局的功能,可修改 src/common/layout 中相应的组件。

# 初始状态及个性化配置

布局的状态使用 src/common/store/state.js 进行管理。需要关心的主要有 uipreference,可以通过修改对应的选项,来改变默认布局的展现形态。

{
  // 布局的展示状态
  ui: {
    // 应用名称
    appName: 'Vue Admin Next',
    // 左侧边栏是否收起
    isAsideCollapsed: false,
    // 右抽屉面板是否展开
    isDrawerVisible: false
  },

  // 用户的个人首选项(可支持通过页面进行个性化配置)
  preference: {
    // 是否使用面包屑
    useBreadcrumb: true,
    // 是否开启标签页视图
    useTabView: true,
    // 是否使用亮色模式
    themeLightMode: false
  }
}

# 使用自定义布局

某些情况下,你可能不需要内置的布局或部分页面需要特定的布局,此时你可以新增自定义的布局组件,实现自己的布局样式:






 














<template>
  <div class="my-custom-app-layout">
    <my-custom-app-aside></my-custom-app-aside>
    <my-custom-app-header></my-custom-app-header>
    <my-custom-app-content>
      <router-view />
      <!-- 路由组件,展示内容部分 -->
    </my-custom-app-content>
    <my-custom-app-footer></my-custom-app-footer>
  </div>
</template>

<style lang="scss" scoped></style>

<script>
export default {
  name: 'my-custom-app-layout',
}
</script>

以下是在不同页面中使用不同布局的路由示例:




 















 









// default layout component
import AppLayout from '@/common/layout';
// my custom layout component
import { MyCunstomAppLayout } from '@/common/layout';

import FoobarComponent from '/path/to/foobar';

const routes = [
  {
    path: '/foo',
    component: AppLayout, // layout
    children: [
      {
        path: 'default-layout',
        component: FoobarComponent
      }
  },
  {
    path: '/bar',
    component: MyCunstomAppLayout, // layout
    children: [
      {
        path: 'custom-layout',
        component: FoobarComponent
      }
    ]
  }
];