修改步骤

​ 引用这位朋友文章

​ https://blog.csdn.net/qq_41299955/article/details/119807405

需要用到的文件

在官网下载的框架源码中,已经包含了远程菜单的配置了

我的版本 ant design vue pro 3.0.0

https://github.com/vueComponent/ant-design-vue-pro

https://pro.antdv.com/docs/router-and-nav

https://github.com/vueComponent/ant-design-vue-pro/blob/master/src/router/generator-routers.js

https://github.com/vueComponent/ant-design-vue-pro/blob/master/src/store/modules/async-router.js

 // 需要修改到的3个文件
src/router/generator-routers.js
src/store/modules/async-router.js 
src/store/modules/index.js 

index.js 文件

修改 src/store/modules/index.js 文件

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

import app from './modules/app'
import user from './modules/user'

// default router permission control
// import permission from './modules/permission' // 注释

// dynamic router permission control (Experimental)
import permission from './modules/async-router' //开放
import getters from './getters'

async-router.js文件

​ async-router.js文件里的 data 数据

	解构  roles 这个字段  是我服务器端传进来的数据也就是data 

​ 如果你本身是token放在请求头上的,这里的 generatorDynamicRouter() 就不需要传参数

import { generatorDynamicRouter } from '@/router/generator-routers'
actions: {
    GenerateRoutes ({ commit }, data) {
      return new Promise(resolve => {
       // const { roles } = data   //这个roles源码本身是token, 
        // console.log('src/store/async-routers===>', roles)
        // 这里不需要传入token, 后端直接拿浏览器的请求头里的token  改成 服务器传回来的 路由
        generatorDynamicRouter().then(routers => {
          commit('SET_ROUTERS', routers)
          resolve()
        })
      })
    }
  }

​

generator-routers.js文件

​ loginService.getCurrentUserNav() 这个是 api接口

​ 请求用户的路由菜单 , 地址改为你服务端的接口即可, 注意后端返回的数据格式请看后面

import * as loginService from '@/api/login'
/**
 * 动态生成菜单
 * @param token
 * @returns {Promise<Router>}
 */
export const generatorDynamicRouter = () => {
  return new Promise((resolve, reject) => {
    // 这个是向后台发送获取菜单的接口
    loginService.getCurrentUserNav().then(res => {
      // console.log(' 后端返回权限=> src/router/generator-routers', res)
      const { result } = res
      const menuNav = []
      const childrenNav = []
      //      后端数据, 根级树数组,  根级 PID  0表示为父级路由 默认
      listToTree(result, childrenNav, 0)
      rootRouter.children = childrenNav
      menuNav.push(rootRouter)
      // console.log('menuNav', menuNav)
      const routers = generator(menuNav)
      routers.push(notFoundRouter)
      // console.log('routers', routers)
      resolve(routers)
    }).catch(err => {
      reject(err)
    })
  })
}

​

后端返回的数据格式

可参考mock数据里面的格式 路径

	src/mock/services/user.js 

​ 这里我抽取一部分数据做演示

​ parentId:0 0 为父级路由 , 1 为子级路由

​ id: 1 表示这个父级的id

​ component : ‘对应前端的路由配置’ // component : ‘Workplace’

// generator-routers.js文件下 演示


import * as loginService from '@/api/login'
import { BasicLayout, BlankLayout, PageView, RouteView } from '@/layouts'

// 前端路由表
const constantRouterComponents = {
  // 基础页面 layout 必须引入
  BasicLayout: BasicLayout,
  BlankLayout: BlankLayout,
  RouteView: RouteView,
  PageView: PageView,
  '403': () => import(/* webpackChunkName: "error" */ '@/views/exception/403'),
  '404': () => import(/* webpackChunkName: "error" */ '@/views/exception/404'),
  '500': () => import(/* webpackChunkName: "error" */ '@/views/exception/500'),

  // 你需要动态引入的页面组件  添加你的页面路由到这
  Workplace: () => import('@/views/dashboard/Workplace'),
  Analysis: () => import('@/views/dashboard/Analysis'),

  // form
  BasicForm: () => import('@/views/form/basicForm'),
  StepForm: () => import('@/views/form/stepForm/StepForm'),
  AdvanceForm: () => import('@/views/form/advancedForm/AdvancedForm'),

}

// 这是后端返回给前端的路由菜单数据

  const nav = [
    // dashboard
    {
      'name': 'dashboard',
      'parentId': 0,
      'id': 1,
      'meta': { 'icon': 'dashboard', 'title': '仪表盘', 'show': true },
      'component': 'RouteView',
      'redirect': '/dashboard/workplace'
    },
    {
      'name': 'workplace',
      'parentId': 1,
      'id': 1001,
      'meta': { 'title': '工作台', 'show': true },
      'component': 'Workplace'
    },
    {
      'name': 'monitor',
      'path': 'https://www.baidu.com/',
      'parentId': 1,
      'id': 1002,
      'meta': { 'title': '监控页（外部）', 'target': '_blank', 'show': true }
    },
    {
      'name': 'Analysis',
      'parentId': 1,
      'id': 1003,
      'meta': { 'title': '分析页2', 'show': true },
      'component': 'Analysis',
      'path': '/dashboard/analysis'
    },

      
    // form  此时这个 form 就是 第2个 父级路由 给他的id 设置为2
    {
      'name': 'form',
      'parentId': 0,
      'id': 2,
      'meta': {
        'icon': 'form',
        'title': '表单页'
      },
      'redirect': '/form/base-form',
      'component': 'PageView'
    },
    {
      'name': 'basic-form',
      'parentId': 2,
      'id': 2001,
      'meta': {
        'title': '基础表单'
      },
      'component': 'BasicForm'
    },
      {
      'name': 'basic-form2',
      'parentId': 2,
      'id': 2002,
      'meta': {
        'title': '基础表单'
      },
      'component': 'BasicForm'
    },
      // 这是第3个父级路由
     {
      'name': 'menHome',
      'parentId': 0,
      'id': 3,
      'meta': {'title': '基础表单'},
       component: '对应前端的路由配置名称'
     }
  ]