动态route的api

v3中我们使用的api是addRoutes,这个api传输的对象是个数组，在v4中我们使用的api是addRoute这个api,数据是单条的添加进去，这里需要拿到route的list，循环添加进去。

如下：

动态route配置

这里我们要找router的这个文件夹，这里我们能看到如下文件列表

index.js是我们主配置文件，这里我们主要来看这个generator-routers这个文件，这里配置我们的动态路由

constantRouterComponents这个是我们的前端路由表，我们需要配置的动态路由都要写在这里

本地路由配置

在配置完动态路由后，我们需要在本地配置文件中做路由的配置，这里我们去找config目录

如下：

这里我们去找到router.config.js,在这文件中我们从命名就能看到这个对象的意思：asyncRouterMap constantRouterMap一个是异步路由，一个是静态路由，这里我们需要把我们的动态路由配置在动态路由的对象里

配置很简单，照葫芦画瓢就可以了。

到了这里，其实剩下的就都不再是前端的工作了。但是在这个项目中有mock数据，这样，其实我们可以自己来配置我们的后端返回的数据。

mock配置

mock这里给模拟后端返回的数据。其实数据，我们可以从permission这个文件来看下，主要看store的GetInfo和GenerateRoutes,一个是获取用户信息权限的，一个是获取从后端返回的路由参数的方法，知道这个两个方法是做什么的，我们就要去查看方法所使用的api,在api这个文件中，我们看到所使用的api是

UserInfo: '/user/info',

UserMenu: '/user/nav'

我们查看mock文件

我们在index.js文件内中看到user接口在service的user.js文件

这里我们看到这几个参数：roleObj这个参数是用户的权限列表，这些权限对应的是项目中的模块的权限

userNav是用户权限对应的路由权限注意其中

parentId,
id

这两个参数，就像命名一样，有主从关系，是相互管理的，一级类目id为1的话，它的parentId为0，但是一级类目的二级类目，parentId就为1，自身id在自己分配。

antd-vue-pro的动态路由大致就如此配置了，希望能帮助到大家！！！