2.router+axios+mock整合菜单导航

1、MOCK封装

1.1、在mock目录下新建modules文件夹.并创建menu.js

// 获取菜单树
const menuTreeData = {
  "code": 200,
  "msg": '成功',
  "data": [
    {
      "menuId": 1,
      "parentId": 0,
      "name": "系统管理",
      "url": null,
      "perms": null,
      "type": 0,
      "icon": "el-icon-setting",
      "orderNum": 0,
      "level": 0,
      "children": [
        {
          "menuId": 2,
          "parentId": 1,
          "name": "微信用户",
          "parentName": "系统管理",
          "url": "/miniUser",
          "perms": null,
          "type": 1,
          "icon": "el-icon-service",
          "orderNum": 1,
          "delFlag": 0,
          "level": 1,
          "children": [{
            "menuId": 4,
            "parentId": 2,
            "name": "删除",
            "parentName": "微信用户",
            "url": null,
            "perms": 'wx:miniUser:del',
            "type": 2,
            "icon": null,
            "orderNum": 5,
            "delFlag": 0,
            "level": 2
          }]
        },
        {
          "menuId": 3,
          "parentId": 1,
          "name": "菜单管理",
          "parentName": "系统管理",
          "url": "/menu",
          "perms": null,
          "type": 1,
          "icon": "el-icon-news",
          "orderNum": 2,
          "delFlag": 0,
          "level": 1,
          "children": []
        }
      ]
    }
  ]
}
export function getMenu() {
  //console.log('menu.json');
  return {
    url: '/menu.json',
    type: 'get',
    data: menuTreeData
  }
}

1.2、将mock/index.js进行封装

本人参考的是博客园的朝雨忆轻尘:
工具模块封装

import Mock from "mockjs";
import * as menu from "./modules/menu";


// 1. 开启/关闭[所有模块]拦截, 通过调[openMock参数]设置.
// 2. 开启/关闭[业务模块]拦截, 通过调用fnCreate方法[isOpen参数]设置.
// 3. 开启/关闭[业务模块中某个请求]拦截, 通过函数返回对象中的[isOpen属性]设置.
// let openMock = true
let openMock = true;
fnCreate(menu, openMock);
/**
 * 创建mock模拟数据
 * @param {*} mod 模块
 * @param {*} isOpen 是否开启?
 */
function fnCreate(mod, isOpen = true) {
  if (isOpen) {
    for (var key in mod) {
      (res => {
        if (res.isOpen !== false) {
          let url = process.env.BASE_API + res.url;
          Mock.mock(new RegExp(url), res.type, opts => {
            delete opts.body;
            console.log("\n");
            console.log("%cmock拦截, 请求: ", "color:blue", opts);
            console.log("%cmock拦截, 响应: ", "color:blue", res.data);
            return res.data;
          });
        }
      })(mod[key]() || {});
    }
  }
}

这样以后开关、封装都会非常的方便

2、整合axios的http请求

2.1、src下新建api目录并创建axios.js

统一配置封装axios的请求.详情看代码

/*src/api/axios.js*/
import axios from "axios";

export default function $axios(options) {
  return new Promise((resolve, reject) => {
    const service = axios.create({
      baseURL: process.env.BASE_API,// src/config目录下的dev和prod两个文件里配置
      method: "get",
      timeout: 10000,//请求超时时间
      responseType: "json" // 返回数据类型
    });

    // request拦截器
    service.interceptors.request.use(
      config => {
        config.headers["xxx-token"] = 'xiaobusi'; // 让每个请求携带自定义token 这里先写死请根据实际情况自行修改
        config.headers["Content-Type"] = "application/json";
        return config;
      },
      error => {
        // Do something with request error
        console.log(error); // for debug
        Promise.reject(error);
      }
    );
    
    // 请求处理
    service(options)
      .then(res => {
        resolve(res);
        return false;
      })
      .catch(error => {
        reject(error);
      });
  });
}

2.2、封装各种模块并整合挂载到Vue的原型链上

2.2.1、新建modules目录并创建menu.js

/*src/api/modules/menu.js*/
import axios from '../axios'

/* 
 * 菜单管理模块
 */

export const getMenu = () => {
    return axios({
        url: '/menu.json',
        method: 'get'
    })
}

2.2.2、新建api.js加载所有模块并导出

/*src/api/api.js*/
/* 
 * 接口统一集成模块
 */
import * as menu from './modules/menu'

// 默认全部导出
export default {
    menu
}

2.2.3、新建index.js.并所有api请求挂载到Vue上

/*src/api/index.js*/
// 导入所有接口
import apis from './api'

const install = Vue => {
    if (install.installed)
        return;

    install.installed = true;

    Object.defineProperties(Vue.prototype, {
        // 注意，此处挂载在 Vue 原型的 $api 对象上
        $api: {
            get() {
                return apis
            }
        }
    })
}

export default install

开始测试

测试成功

3、整合页面菜单导航

3.1、src下新建views目录

主要还是参考Element布局容器
：外层容器。当子元素中包含或时，全部子元素会垂直上下排列，否则会水平左右排列。

：顶栏容器。

：侧边栏容器。

：主要区域容器。

：底栏容器。

在views下新建Home和目录layout并新建Header、Menu、Footer

views/Home.vue

views/layout/Header.vue

views/layout/Footer.vue

views/layout/Menu.vue

添加菜单对应的路由

@/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      children: [
        { path: "test", component: () => import('@/views/test/index'), name: "test" },
        { path: "miniUser", component: () => import('@/views/miniUser/index'), name: "miniUser" },
        { path: "menu", component: () => import('@/views/system/menu/index'), name: "menu" }
      ]
    }
  ]
})

注意:
Home.vue中的是一个嵌套组件
router/index.js中home下的children组件就会嵌套在里面

3.2、整合菜单

3.2.1、新建模块@/views/core/TableTreeColumn

3.2.1、新建菜单页views/system/menu/index.vue

效果图