博客搭建（8）-后端返回动态路由

一.创建组件名称和组件对象对应表

在src/router/index.js中可以看到异步路由表，如下

但是这里面的component对应的是组件对象，但是后端只能返回字符串，所以我们需要把后端返回的组件字符串转换成组件对象，前端需要定义一个map数组来映射。

在src/router/index.js中定义组件map，如下

后端接口只需要返回如下格式：

二.定义请求接口

前端定义接口，修改请求

在src/api/user.js中定义请求方法：

在src/permission.js中可以看到获取路由并挂载的地方，如下：

在src/store/modules/permission.js中找到这个action，并修改如下

三.组件名称替换成组件对象

在上面这个文件中定义replaceComponent方法来替换组件名称，记得引入相关的变量和方法

最终前端会显示后端传过来的菜单，这里注意的是后端的路由格式，以及前端map数组的定义要正确

四.路由菜单表设计，及接口数据处理返回路由数据格式

下面我们将路由存放到数据库中，通过数据库读取，这里给出t_menu表（路由菜单表)的定义SQL如下：

-- ----------------------------
-- Table structure for t_menu
-- ----------------------------
DROP TABLE IF EXISTS `t_menu`;
CREATE TABLE `t_menu`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `name` char(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '路由名称',
  `path` char(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '路径',
  `component` char(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '组件名称',
  `hidden` tinyint(1) NOT NULL DEFAULT 0 COMMENT '是否隐藏',
  `alwaysShow` tinyint(1) NULL DEFAULT NULL COMMENT '设置一级菜单，是否总是显示',
  `redirect` char(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '面包屑是否重定向',
  `pid` int(11) NOT NULL DEFAULT 0 COMMENT '父路由',
  `roles` char(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '允许访问的角色',
  `title` char(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '左侧导航栏和面包屑显示名称',
  `icon` char(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '图标',
  `noCache` tinyint(1) NOT NULL DEFAULT 0 COMMENT '是否不要缓存',
  `affix` tinyint(1) NOT NULL DEFAULT 0 COMMENT '标签页是否总是显示',
  `breadcrumb` tinyint(1) NOT NULL DEFAULT 1 COMMENT '是否显示面包屑',
  `activeMenu` char(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '左侧菜单高亮',
  `create_time` datetime(0) NOT NULL COMMENT '创建时间',
  `update_time` datetime(0) NOT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

INSERT INTO `t_menu` VALUES (1, 'Permission', '/permission', 'Layout', 0, 1, '/permission/page', 0, 'admin,editor', 'Permission', 'lock', 0, 0, 1, '', '2021-03-23 13:16:07', '2021-03-23 13:16:12');
INSERT INTO `t_menu` VALUES (2, 'PagePermission', 'page', 'permission/page', 0, NULL, '', 1, 'admin', 'Page Permission', '', 0, 0, 1, '', '2021-03-23 13:31:12', '2021-03-23 13:31:14');
INSERT INTO `t_menu` VALUES (3, 'DirectivePermission', 'directive', 'permission/directive', 0, NULL, '', 1, '', 'Directive Permission', '', 0, 0, 1, '', '2021-03-23 13:33:27', '2021-03-23 13:33:29');
INSERT INTO `t_menu` VALUES (4, 'RolePermission', 'role', 'permission/role', 0, NULL, '', 1, '', 'Role Permission', '', 0, 0, 1, '', '2021-03-23 13:34:41', '2021-03-23 13:34:45');

这里后端接口的方法修改为如下：

formateMenu方法如下：

图连起来，截个完整。。。

上面是我新定义的一个路由页面，并使用了element-ui的组件，UI组件使用很方便，后面会继续写路由的管理更新及UI组件的使用

后面有连载！！！，有兴趣的可以去我的主页找对应博客搭建分栏，这里我就懒得放链接了