vuex实现从服务端动态加载路由

一、前言

通常情况下，前端配置主要放在router.js文件中，如果新加一个菜单的话，就直接在文件中新增一个路由。当然按照后端可维护性得到做法，可以把菜单作为配置，配置起来，不用每次都修改文件内容。

二、通常在文件中配置的做法

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import HomeDemo from '../views/HomeDemo.vue'
import Test1 from "@/views/Test1";
import Test2 from "@/views/Test2";
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'login',
    component: Login,
    hidden:true
  },
  {
    path: '/home',
    name: 'HomeDemo',
    component: HomeDemo,
    hidden:true
  },
  {
    path: '/home',
    name: '一级菜单',
    component: HomeDemo,
    children:[
      {
        path: '/test1',
        name: '二级菜单一',
        component: Test1
      },
      {
        path: '/test2',
        name: '二级菜单二',
        component: Test2
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

三、使用vuex状态管理模式实现

        1.首先在创建vuex的配置文件，定义要存放的数据 即从服务端加载过来的路由表

文件名通常是store.js

        

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

Vue.use(Vuex);

export default new Vuex.store({
    state:{
        routers:[]
    },
    mutations:{
        initRouters(state,data){
            state.routers = data;
        }
    },
    action:{

    }
})

四，处理服务端或者说格式化后端返回的路由表

服务端返回的数据格式

[{
	"id": 2,
	"url": "/",
	"path": "/home",
	"component": "Home",
	"name": "前台系统管理",
	"iconCls": "fa fa-user-circle-o",
	"parentId": 1,
	"enabled": true,
	"children": [{
			"id": 7,
			"url": null,
			"path": "/home/banner",
			"component": "Banner",
			"name": "首页广告",
			"iconCls": null,
			"parentId": 2,
			"children": null

		},
		{
			"id": 8,
			"url": null,
			"path": "/home/activity",
			"component": "Activity",
			"name": "首页活动",
			"iconCls": null,
			"parentId": 2,
			"children": null

		}
	]

}]

可以和代码一的router.js做对比，component字段返回的字符串而非Vue中引入的组件对象，所以传过来的数据不能直接用，要格式化成我们需要的样子。

五、格式化服务端返回的路由表信息

import {getRequest} from "@/utils/config";

export const initMenus=(router,store)=>{ //初始化菜单时 传入路由配置和vuex的配置
    if (store.state.routers.length>0){ //如果store中已经存在路由表则直接返回
        return
    }

    getRequest('/system/config/menus').then(data=>{
        if (data){ 
            let fmtRouters = formatRouters(data); //创建格式化数据的函数
            router.addRoutes(fmtRouters); //写入路由表
            store.commit('initRouters','fmtRouters');//写入vuex
        }

    })
}

export const formatRouters=(routers)=>{
    let fmtRouters = [];
    routers.forEach(router=>{ //预设服务端返回的数据对象
        let{
            path,
            component,
            name,
            iconCls,
            children
        } = router;

        if (children&& children instanceof Array){ //判断是否有子菜单，如果有定会调用格式化数据
            formatRouters(children);
        }

        let fmtRouter = { //格式化之后的数据赋值
            path :path,
            name : name,
            iconCls : iconCls,
            children : children,
            component(resolve){
                require(['../views/' + component +'.vue'],resolve);
            }
        }
        fmtRouters.push(fmtRouter);
        return fmtRouters;
    })
}

六，页面中调用的方式 和之前在router.js中获取的方式就一样了