【金秋打卡】第17天 动态路由

课程名称：基于Vue3最新标准，实现后台前端综合解

课程章节： 第一章

课程讲师：Sunday

课程内容

    课程中 首先将 路由文件 进行区分 （私有路由 公开路由）

    页面通过 

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
console.log(router.getRoutes())
</script>

能获取 项目中所有得路由 但获得到得路由内容是

1. 存在重复的路由数据

   
   

2. 不满足该条件 meta && meta.title && meta.icon 的数据不应该存在

需要定义两个方法 处理路由

/**
 * 返回所有子路由
 */
 const getChildrenRoutes = routes => {
  const result = []
  routes.forEach(route => {
    if (route.children && route.children.length > 0) {
      result.push(...route.children)
    }
  })
  return result
  }
 /**
 * 处理脱离层级的路由：某个一级路由为其他子路由，则剔除该一级路由，保留路由层级
 * @param {*} routes router.getRoutes()
 */
 export const filterRouters = routes => {
  const childrenRoutes = getChildrenRoutes(routes)
    return routes.filter(route => {
      return !childrenRoutes.find(childrenRoute => {
        return childrenRoute.path === route.path    
      })
  })
 }

将所有得路由进行处理 之后会得到一个 我们想要得 数组

[
    {
        "path":"/profile",
        "name":"profile",
        "meta":{
            "title":"profile",
            "icon":"el-icon-user"
        },
    },
    {
        "path":"/user",
        "redirect":"/user/manage",
        "meta":{
            "title":"user",
            "icon":"personnel"
        },
        "props":{
            "default":false
        },
        "children":[
            {
                "path":"/user/manage",
                "name":"userManage",
                "meta":{
                    "title":"userManage",
                    "icon":"personnel-manage"
                },
                "children":[

                ]
            },
            {
                "path":"/user/role",
                "name":"userRole",
                "meta":{
                    "title":"roleList",
                    "icon":"role"
                },
                "children":[

                ]
            },
            {
                "path":"/user/permission",
                "name":"userPermission",
                "meta":{
                    "title":"permissionList",
                    "icon":"permission"
                },
                "children":[

                ]
            }
        ],
    },
    {
        "path":"/article",
        "redirect":"/article/ranking",
        "meta":{
            "title":"article",
            "icon":"article"
        },
        "props":{
            "default":false
        },
        "children":[
            {
                "path":"/article/ranking",
                "name":"articleRanking",
                "meta":{
                    "title":"articleRanking",
                    "icon":"article-ranking"
                },
                "children":[

                ]
            },
            {
                "path":"/article/create",
                "name":"articleCreate",
                "meta":{
                    "title":"articleCreate",
                    "icon":"article-create"
                },
                "children":[

                ]
            }
        ],
    }]