如果是开发一个管理系统，那么后盾除了登录、注册、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>

批改完，页面成果如下：

总结

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

-- 完 --