vue3的路由配置

1. 先找到Layout布局文件，从中找到左侧边栏，找到下述代码

<SidebarItem v-for="route in noHiddenRoutes" :key="route.path" :item="route" :base-path="route.path" />/**
*菜单项 <SidebarItem>:
*使用v-for循环遍历noHiddenRoutes数组，为每个路由生成一个<SidebarItem>组件。
*:key="route.path"：为每个<SidebarItem>提供唯一的键值，这是Vue中优化DOM更新的一种方式。
*:item="route" 和 :base-path="route.path"：将当前路由对象和路径作为属性传递给<SidebarItem>。
*/

2. 查看noHiddenRoutes数组

const noHiddenRoutes = computed(() => permissionStore.routes.filter((item) => !item.meta?.hidden))
//从 permissionStore 中获取路由列表，过滤掉 meta.hidden 为 true 的路由，保留未隐藏的路由。

3. 查看permissionStore，找到下述与展示路由有关代码

/** 根据角色生成可访问的 Routes（可访问的路由 = 常驻路由 + 有访问权限的动态路由） */const setRoutes = (roles: string[]) => {const accessedRoutes = filterDynamicRoutes(dynamicRoutes, roles)_set(accessedRoutes)}

4. 查看 filterDynamicRoutes 函数

const filterDynamicRoutes = (routes: RouteRecordRaw[], roles: string[]) => {//过滤动态数组console.log(12345)//被打印，说明这个函数被调用const res: RouteRecordRaw[] = []console.log(routes,'4444')routes.forEach((route) => {const tempRoute = { ...route }console.log(333333)//没有被打印，说明两者之间的内容不被执行if (hasPermission(roles, tempRoute)) {if (tempRoute.children) {tempRoute.children = filterDynamicRoutes(tempRoute.children, roles)}res.push(tempRoute)}})return res
}

在12345和333333之间的函数 routes.forEach((route) 作用是遍历 routes 数组，此时我们打印 routes 的值，发现打印结果是个空数组[]，说明这个数组没有被传递进来。

5. 这个函数是filterDynamicRoutes 的定义，那么我们找到使用这个函数的地方，看入参是什么

  /** 根据角色生成可访问的 Routes（可访问的路由 = 常驻路由 + 有访问权限的动态路由） */const setRoutes = (roles: string[]) => {console.log('2222222')const accessedRoutes = filterDynamicRoutes(dynamicRoutes, roles)_set(accessedRoutes)}

我们发现入参 routes 是 dynamicRoutes 动态路由，跳转到 dynamicRoutes 函数，这个函数内 容为空，我们将需要权限才能展示的路由放在动态路由函数内，此时页面不再是空数组

6. 然后继续执行if条件句

const hasPermission = (roles: string[], route: RouteRecordRaw) => {//用于检查用户是否有权限访问某个路由const routeRoles = route.meta?.roles//从路由对象的 meta 属性中提取 roles 字段return routeRoles ? roles.some((role) => routeRoles.includes(role)) : true//根据 routeRoles 和 roles 判断用户是否有权限访问该路由
}

最后前端路由按要求role为admin可显示，为editor不可显示