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>

修改完，页面效果如下：

总结

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

-- 完 --