2021/10/29 vue-antd 如何实现动态路由

2021/10/29
文件（路径）：router.map.js 项目根目录/src/router/async/router.map.js
Login.vue 项目根目录/src/pages/login/Login.vue
此处仅为测试。
请复制一下代码到router.map.js：

// 视图组件
const view = {
tabs: () => import('@/layouts/tabs'),
blank: () => import('@/layouts/BlankView'),
page: () => import('@/layouts/PageView')
}

// 路由组件注册

const routerMap = {
login: {
authority: '*',
path: '/login',
component: () => import('@/pages/login')
},

root: {
path: '/',
name: '登录',
redirect: '/login',
component: view.tabs
},

devAdmin: {
path: '/devAdmin',
name: '菜单名',
redirect: '/devAdmin',
component: view.page
},

developer: {
path: '/devAdmin/developer',
component: () => import("@/pages/devAdmin/developer"),
},

permisGroup: {
path: '/devAdmin/permisGroup',
component: () => import("@/pages/devAdmin/permisGroup"),
},

}
export default routerMap

解释：在登录界面会有获取路由的入口，我在入口前面定义了我要模仿后台传到前台的路由数组数据，数据格式如下：

let data = [
{
router: "root",
children: [
//root 路由的子路由配置
{
router: "home",
path: "/home", // url路径
children: [],
name: "首页",
icon: "user",
component: () => import("@/pages/home"),
},
{
router: "mune",
path: "/mune",
name: "菜单名1",
icon: "menu",
children: [
{
router: "mune",
path: "/mune/muner",
name: "菜单名2",
icon: "form",
component: () => import("@/pages/mune/muner"),
},
{
router: "permily",
path: "/opener/permily",
name: "菜单名2",
icon: "form",
component: () => import("@/pages/opener/permily"),
},
],
},
];

loadRoutes(data);
this.$router.push("/home");

你可能有点糊涂，但这个不是给你看的，是给我自己看的，这不是一篇适用于大众的教程，而是我记忆的一把钥匙。
注意：asyncRoutes要设置为true，在setting.config.js里面。
注意！：后台传过来的路由的一级导航要在router.map.js的routerMap数组里面。