vue3+vue-router+vite 实现动态路由

文章中出现的代码是演示版本，仅供参考，实际的业务需求会更加复杂

什么是动态路由

什么场景会用到动态路由

举一个最常见的例子，比如说我们要开发一个后台管理系统，一般来说后台管理系统都会分角色登录，这个时候也就涉及到了权限，比如说这个后台管理系统现在有超级管理员，管理员，运维，财务等这几个角色，每个角色登录系统之后都会有不同的权限，超级管理员需要所有的权限，财务可能只需要财务相关的模块(菜单)以及按钮等，通常实现这种需求会有以下常见方案

路由表由前端去维护

也就是说我们已知这几个角色分别对应哪些权限，前端写好路由配置表，，后端只需要告诉你当前登录人是属于哪个角色，前端根据角色类型去写一个过滤函数，获取该角色所拥有的菜单以及按钮，然后动态的去添加路由，这样做有一个缺点就是，如果又增加了一个新的角色怎么办？某个角色想增加一些权限怎么办？这个时候前端就需要去新增或者修改代码，一点也不友好

路由表的数据由后端返回

这种也是常用的一种方式，可能我们的系统里面需要开发一些功能，如菜单管理,角色管理,用户管理等，也就是常说的权限中心，前端开发完的页面所对应的路由信息有后端去维护，这个时候我们在开发的时候需要约束某一种规则，比如所有页面都放到/src/views目标下面，然后通过菜单管理去维护数据，维护完的数据可以到角色管理里面去配置角色菜单，配置完角色，可以到用户管理里面给某个用户配置角色等一些列流程，这样的话即使新增一个角色，或者修改一个角色的角色菜单，前端都不需要去修改代码，只要在菜单管理里面维护好了数据，想怎么改怎么改，后端返回的数据格式可能如下：

[
  {
   
   
    path: "/application",
    name: "application",
    component: "Layout",
    title: "应用管理",
    show: true,
    icon: "",
    children: [
      {
   
   
        path: "",
        name: "application-index",
        component: "/application/index.vue",
      },
    ],
  },
  {
   
   
    path: "/permission",
    name: "permission",
    component: "Layout",
    title: "权限管理",
    show: true,
    icon: "",
    children: [
      {
   
   
        path: "menu",
        name: "permission-menu",
        component: "/permission/menu/index.vue",
        title: "菜单管理",
        show: true,
        icon: "",
      },
      {
   
   
        path: "user",
        name: "permission-user",
        component: "/permission/user/index.vue",