1.vue组件化思想的理解

1.1 如果将一个页面中所有的处理逻辑全部放在一起，那么处理起来会非常复杂混乱，而且不利于后续的管理以及扩展。

1.2 如果将页面拆分成一个个小的功能块，每个功能块完成属于自己的独立功能，那么整个页面的管理和维护就变得容易了。

1.3 vue组件系统提供了一种抽象，让我们可以使用独立可复用的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率，方便重复使用（复用），简化调试步骤，提升项目可维护性，便于多人协同开发。

2.主界面组件化布局区域划分

2.1 主界面首先分为两个区域：左边导航容器区域、右边主区域

2.2 左边导航容器区域：放导航菜单

2.3 右边主区域包括：头部区域、tab区域、路由变换页区域

`<template>

<!--
  *@Description:主界面布局
  *@Author 前端逢君
-->
<div class="layout-container">
		<!-- 左边导航容器 -->
    <div class="layout-sidebar-container">
      <CMenu ref="menu" 
      :dataProvider="dataProvider" 
      :homeUrl="homeUrl" 
      :isCollapse="isCollapse" 
      :selectId.sync="menuActive"
  @e-select-item="onSelectItem" />
        </div>	
  <!-- 右边主区域 -->
  <div class="layout-main-container">
    <!-- 头部区域 -->
    <div class="head-view">
      <HeadComp></HeadComp>	
  </div>
  <!-- tab区域 -->
  <div class="tab-view">
    <TabComp ref="tabComp"></TabComp>
  </div>	
  <!-- 路由变换页区域 -->
  <div class="main-view">
    <MainComp></MainComp>
  </div>
  </div>
	</div>

</template>`

3.js脚本处理

3.1 将主界面划分四个组件区域拼接起来。分别是：导航菜单组件、路由组件、上部用户信息组件、Tab组件。

3.2 左边导航菜单，根据路由配置 解析生成 导航菜单数据源。

3.3 watch侦听路由变化，调用主界面相关组件方法。

/**导航菜单组件*/
import CMenu from
'@/layout/menu/CMenu.vue'
/**路由组件*/
import MainComp from 
'@/layout/comp/MainComp.vue'
/**上部用户信息组件*/
import HeadComp from 
'@/layout/comp/HeadComp.vue'
/**Tab组件*/
import TabComp from 
'@/layout/comp/TabComp.vue'
/**路由配置转换为导航数据源*/
import {convertToDataProvider} 
from '@/common/funcPermission.js'

import {  
  mapState
} from 'vuex';   

export default {

  components:
  {
    CMenu,
    MainComp,
    HeadComp,
    TabComp
  },

  props: {

  },
  data() {
    return {    
      //菜单数据源
      dataProvider:[],
      //菜单激活项
      menuActive:'',
      //主页路由url
      homeUrl:'/dashboard',
    }
  },

  //侦听路由变化
  watch: {
    $route:'routeHandle',
    immediate:true
  },

  computed:
  {
    ...mapState(['permission','other']), 

    //控制左边导航收缩或展开
    isCollapse()
    {
      return this.other.isCollapse;
    }

  },

  mounted() {      
    //获取路由列表
    let pms=this.permission.routes;
    //路由列表转化为menu数据源
    let obj=convertToDataProvider(pms);
    this.dataProvider=obj.dataProvider;
    //首页默认显示出来
    this.$refs.tabComp.addHome();           
    //触发左边导航菜单选择激活项
    this.routeHandle(this.$route);
  },
  
  methods: {
  onSelectItem(e)
  {
    let url=e=='-1'?'/':e;  
    this.$router.push({
      path:url
    })
  },
  
	/**路由触发*/
	routeHandle(route) {
  //获取路由路径
  let routeName=route.path;

  //触发上部Tab路由方法
  this.$refs.tabComp.routeHandle(route);      

  //下一侦渲染
  this.$nextTick(()=>{
   this.menuActive=routeName;
  });

 //点击首页，关闭菜单展开
  if(routeName==this.homeUrl)
  {
     this.$refs.menu.closeMenu();
  }   
 }
}

}

4.后面将介绍下路由权限管理 和 递归算法的应用，请大家持续关注。