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

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

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

文档结构

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

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

模块的文档结构如下：

各组件代码

• /src/layout/index.vue

  
  
    
    
    
  
  
  
  
  import { Top, Slider, AppMain } from './components';
  
  export default {
  name: 'Layout',
  components: {
    Top,
    Slider,
    AppMain,
  },
  };
  
  
  
  
  
  

• /src/layout/components/Top.vue

  
  顶部
  
  
  
  export default {
  name: 'LayoutTop',
  };
  
  
  
  
  
  

• /src/layout/components/Slider.vue

  
  导航菜单
  
  
  
  export default {
  name: 'LayoutSlider',
  };
  
  
  
  
  
  

• /src/layout/components/AppMain.vue

  
  
    
      
        工作区
        
      
    
  
  
  
  
  export default {
  name: 'AppMain',
  computed: {
    key() {
      return this.$route.path;
    },
  },
  };
  
  
  
  
  
  

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

• /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';

这是模块的素颜展现：

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

：

工作流程

其工作流程大致如下：

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

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

配置路由

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

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;

修改导航组件

文件位置：

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

  

    
导航菜单
    

      

        用户管理
      
      

        日志管理
      
    
  



export default {
  name: 'LayoutSlider',
};



  /* 样式省略了... */

修改完，页面效果如下：

总结

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

— 完 —

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: Java/JDK 21正式发布！15个特性一览

尊嘟假嘟，成都程序员也 996 吗？ 服务器托管网 JDK 21已经于2023年9月19日正式发布。本文总结了JDK 21发布的新特性。 发布版本说明 根据发布的规划，这次发布的 JDK 21 将是一个长期支持版（LTS 版）。LTS 版每 2 年发布一个，上…