Vue---后台管理的通用布局模块

如果是开发一个管理系统，那么后台除了登录、注册、404等特殊功能页面，其它各工作模块的界面展现形式基本上是固定的。

为保持界面风格一致，从可维护和松耦合的角度出发，我们可以在项目中创建一个通用的布局模块。

文档结构

比如将该模块分为三部分：

• 顶部组件（显示logo、项目名称、用户信息等）；
• 左侧导航组件（显示导航菜单）；
• 右侧工作区组件（显示对应的功能模块）；

模块的文档结构如下：

各组件代码

• /src/layout/index.vue

  <template>
  <div>
    <top />
    <slider />
    <app-main />
  </div>
  </template>
  
  <script>
  import { Top, Slider, AppMain } from './components';
  
  export default {
  name: 'Layout',
  components: {
    Top,
    Slider,
    AppMain,
  },
  };
  </script>
  
  <style>
  
  </style>
  

• /src/layout/components/Top.vue

  <template>
  <div>顶部</div>
  </template>
  
  <script>
  export default {
  name: 'LayoutTop',
  };
  </script>
  
  <style>
  
  </style>
  

• /src/layout/components/Slider.vue

  <template>
  <div>导航菜单</div>
  </template>
  
  <script>
  export default {
  name: 'LayoutSlider',
  };
  </script>
  
  <style>
  
  </style>
  

• /src/layout/components/AppMain.vue

  <template>
  <section>
    <transition name="fade-transform" mode="out-in">
      <keep-alive>
        工作区
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
  </template>
  
  <script>
  export default {
  name: 'AppMain',
  computed: {
    key() {
      return this.$route.path;
    },
  },
  };
  </script>
  
  <style>
  
  </style>
  

在模板中使用了<router-view>标签，它会被对应的功能模块替换。

• /src/layout/components/index.js

  export { default as AppMain } from './AppMain.vue';
  export { default as Top } from './Top.vue';
  export { default as Slider } from './Slider.vue';

这是模块的素颜展现：

为说清楚结构，添加了样式，下面是美化后的展现（样式代码就不放出来了，与本文关系不大）

：

工作流程

其工作流程大致如下：

• 点击导航组件中的菜单，获取路由地址。
• 在工作区使用<router-view>标签，显示路由对应的功能模块。

要使此工作流程跑通，关键的操作是：在路由配置文件中，将布局模块做为父组件，各功能模块都是布局模块的子组件。

配置路由

修改路由文件，比如添加用户模块和日志模块两个子路由。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Layout from '@/layout/index.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Layout',
    component: Layout,
    children: [{
      path: 'user',
      component: () => import(/* webpackChunkName: "user" */ '@/views/user/index.vue'),
    }, {
      path: 'log',
      component: () => import(/* webpackChunkName: "log" */ '@/views/log/index.vue'),
    }],
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

修改导航组件

文件位置：

代码如下，主要是添加了两个路由链接：

<template>
  <section>
    <div class="title">导航菜单</div>
    <ul class="menus">
      <li class="menu">
        <router-link class="link" to="/user">用户管理</router-link>
      </li>
      <li class="menu">
        <router-link class="link" to="/log">日志管理</router-link>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  name: 'LayoutSlider',
};
</script>

<style lang="scss" scoped>
  /* 样式省略了... */
</style>

修改完，页面效果如下：

总结

通过使用布局模块，可以整体把控项目的风格和布局，当更改整体配色和布局时，只需在此模块内操作，不会影响其他模块，同时也避免了代码的冗余。

-- 完 --