关于vue.js: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>

批改完，页面成果如下：

总结

通过应用布局模块，能够整体把控我的项目的格调和布局，当更改整体配色和布局时，只需在此模块内操作，不会影响其余模块，同时也防止了代码的冗余。

— 完 —