当前位置：首页 > article >正文

vue3的路由配置

article 2025/2/1 2:18:50

先找到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>。
*/

查看noHiddenRoutes数组

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

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

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

查看 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 的值，发现打印结果是个空数组[]，说明这个数组没有被传递进来。

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

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

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

然后继续执行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 判断用户是否有权限访问该路由
}