Vue3 利用 json 数据动态生成路由和实现组件懒加载

前言：

目前都只是在学习，做项目顶多是为了比赛，所以一般不去考虑项目的可维护性，故就基本就不花力气去专研动态生成菜单，动态配置路由了，顶多是在动态引入组件上做下优化。但随着经验的增长，我渐渐觉得这样一直划水太不好了，恰逢想写个团队官网，想以后一直让师弟师妹维护，故不得不改变自己，这次就从利用 json 数据动态配置路由以及实现动态懒加载开始吧。
注释：因为目前缺少后台接口，故先在本地用json存储数据先。

json文件存储路由数据

特别说明1：因为这时 vue3，故错误地址重定向我用了：

{
   "path": "/:catchAll(.*)",
   "redirect": {"name": "error"}
 }

特别说明2：meta 的数据是为了我自己的一些业务而设置的，你们可执行设置。

部分 json 数据：

[
  {
    "path": "/login",
    "name": "login",
    "meta": {
      "title": "登录"
    },
    "component": "views/login/index.vue",
    "children": []
  },
  {
    "path": "/manage",
    "name": "manage",
    "meta": {
      "title": "管理端",
      "auth": true,
      "role": 0
    },
    "component": "views/manage/index.vue",
    "children": [
      {
        "path": "testing",
        "name": "testing",
        "meta": {
          "title": "监控中心",
          "icon": "el-icon-monitor",
          "auth": true,
          "role": 0
        },
        "component": "views/manage/testing/index.vue",
        "children": []
      },
      {
        "path": "mien",
        "name": "mien",
        "meta": {
          "title": "团队风采",
          "icon": "el-icon-ship",
          "auth": true,
          "role": 0
        },
        "component": "views/manage/mien/index.vue",
        "children": [
          {
            "path": "list",
            "name": "mien-list",
            "meta": {
              "title": "风采列表",
              "auth": true,
              "role": 0
            },
            "component": "views/manage/mien/list.vue"
          },
          {
            "path": "publish",
            "name": "mien-publish",
            "meta": {
              "title": "风采发布",
              "auth": true,
              "role": 0
            },
            "component": "views/manage/mien/publish.vue"
          }
        ],
        "redirect": {"name": "mien-list"}
      },
      {
        "path": "user",
        "name": "user",
        "meta": {
          "title": "成员管理",
          "icon": "el-icon-user",
          "auth": true,
          "role": 1
        },
        "component": "views/manage/user/index.vue",
        "children": [
          {
            "path": "list",
            "name": "user-list",
            "meta": {
              "title": "账号列表",
              "auth": true,
              "role": 1
            },
            "component": "views/manage/user/list.vue"
          },
          {
            "path": "group",
            "name": "user-group",
            "meta": {
              "title": "组别管理",
              "auth": true,
              "role": 1
            },
            "component": "views/manage/user/group.vue"
          },
          {
            "path": "direction",
            "name": "user-direction",
            "meta": {
              "title": "方向管理",
              "auth": true,
              "role": 1
            },
            "component": "views/manage/user/direction.vue"
          },
          {
            "path": "role",
            "name": "user-role",
            "meta": {
              "title": "角色权限",
              "auth": true,
              "role": 1
            },
            "component": "views/manage/user/role.vue"
          }
        ],
        "redirect": {"name": "user-list"}
      },
      {
        "path": "center",
        "name": "center",
        "meta": {
          "title": "个人中心",
          "icon": "el-icon-user",
          "auth": true,
          "role": 0
        },
        "component": "views/manage/center/index.vue",
        "children": []
      }
    ],
    "redirect": {"name": "testing"}
  },
  {
    "path": "/error",
    "name": "error",
    "meta": {
      "title": "404页面"
    },
    "component": "views/manage/error/index.vue"
  },
  {
    "path": "/",
    "redirect": {"name": "login"}
  },
  {
    "path": "/:catchAll(.*)",
    "redirect": {"name": "error"}
  }
]

---

动态生成路由配置以及动态懒加载组件

重点知识：动态实现组件懒加载！！

平常我们只需要：

component: () => import('./views/login/index.vue')

而将数据放在 json 后，我们还想实现组件懒加载就有两个问题：

1. json 文件不能存储函数，虽然我们能在 json 中存储组件路径再进行 js 处理从而实现组件懒加载。
2. 如何用 js 来实现组件懒加载呢？

解决：

// 在 js 中遍历数据时将对象的 component 设置为以下形式
// 这里必须使用模板字符串方式拼接路径，否则无法识别。
// 而且不能变量开头！！例如将 @/ 加入变量中再直接使用变量......
component = () => import(`@/${name}`)

完整的 router.ts 代码：

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import MenusData from '../data/menus' // 获取上面设置的 json 数据

const Date = JSON.parse(JSON.stringify(MenusData)) // 将 json 数据转换为一个普通数组

// 处理动态引入组件函数
const getComponent = (data: any) => {
  data.map((item: any) => {
    const name = item.component
    // 这里必须使用模板字符串方式拼接路径，否则无法识别。
    // 而且不能变量开头！！例如将 @/ 加入变量中再直接使用变量......
    item.component = () => import(`@/${name}`)
    // 利用递归，处理多级路由
    if (item.children && item.children.length) {
      getComponent(item.children)
    }
  })
  return data
}

const routerDate = getComponent(Date) // 获取处理后的理由数据

const routes: Array<RouteRecordRaw> = routerDate // 配置路由

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

export default router