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中获取的方式就一样了
————————————————
版权声明：本文为CSDN博主「Java小许」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_36715887/article/details/119582128