微人事（7）- 菜单请求类封装

1 菜单项数据加载成功后

在前端有几个可以存放的地方：

1. sessionStorage
2. localStorage
3. vuex（状态管理工具）

2 vuex 安装配置

import Vue from 'vue'
import Vuex from 'vuex'

Vue.user(Vuex)

export default new Vuex.Store({
    state:{
        routes:[]
    },
    mutations:{
        initRoutes(state,data){
            state.routes = data;
        }
    },
    actions:{

    }
})

• store.js
  

3 菜单请求类的封装

import {getRequest} from "../../utils/api";


export const initMenu=(router,store) =>{
    if(store.state.routes.length > 0){
        // 说明有菜单数据，直接返回
        return;
    }
    getRequest("/system/config/menu").then(data =>{
        if(data){
            let fmtRoutes = formatRoutes(data);
            router.addRoutes(fmtRoutes);
            store.commit('initRoutes', fmtRoutes);
        }
    })
}

export const formatRoutes=(routes)=>{
    let fmRoutes = [];
    routes.forEach(router =>{
        let{
            path,
            component,
            name,
            meta,
            iconCls,
            children
        } = router

        if(children && children instanceof Array){
            // 说明是一级菜单
            children = formatRoutes(children);
        }

        let fmRouter={
            path:path,
            name:name,
            iconCls:iconCls,
            meta:meta,
            children:children,
            component(resolve){
                require(['../views/' + component+'.vue'],resolve);
            }
        }

        fmRoutes.push(fmRouter);
    })
    return fmRoutes;
}

4 前端页面添加并完善菜单请求

5 左边导航菜单加载

路由导航守卫

---

---

5.1 安装图标库

6 页面加载问题

---

• 按回车登录