refactor: rename the variable "whether to enable dynamic routing" from "async" to "dynamic"

src/config/route.ts

@@ -1,9 +1,9 @@
-/** 动态路由配置 */
+/** 路由配置 */
 interface RouteSettings {
   /**
    * 是否开启动态路由功能？
    * 1. 开启后需要后端配合，在查询用户详情接口返回当前用户可以用来判断并加载动态路由的字段（该项目用的是角色 roles 字段）
-   * 2. 假如项目不需要根据不同的用户来显示不同的页面，则应该将 async: false
+   * 2. 假如项目不需要根据不同的用户来显示不同的页面，则应该将 dynamic: false
    */
   dynamic: boolean
   /** 当动态路由功能关闭时：

src/router/index.ts

@@ -255,7 +255,7 @@ export const constantRoutes: RouteRecordRaw[] = [
  * 用来放置有权限 (Roles 属性) 的路由
  * 必须带有 Name 属性
  */
-export const asyncRoutes: RouteRecordRaw[] = [
+export const dynamicRoutes: RouteRecordRaw[] = [
   {
     path: "/permission",
     component: Layouts,

src/router/permission.ts

@@ -43,7 +43,7 @@ router.beforeEach(async (to, _from, next) => {
     // 生成可访问的 Routes
     routeSettings.dynamic ? permissionStore.setRoutes(roles) : permissionStore.setAllRoutes()
     // 将 "有访问权限的动态路由" 添加到 Router 中
-    permissionStore.dynamicRoutes.forEach((route) => router.addRoute(route))
+    permissionStore.addRoutes.forEach((route) => router.addRoute(route))
     // 确保添加路由已完成
     // 设置 replace: true, 因此导航将不会留下历史记录
     next({ ...to, replace: true })

src/store/modules/permission.ts

@@ -2,7 +2,7 @@ import { ref } from "vue"
 import store from "@/store"
 import { defineStore } from "pinia"
 import { type RouteRecordRaw } from "vue-router"
-import { constantRoutes, asyncRoutes } from "@/router"
+import { constantRoutes, dynamicRoutes } from "@/router"
 import { flatMultiLevelRoutes } from "@/router/helper"
 import routeSettings from "@/config/route"
 
@@ -11,13 +11,13 @@ const hasPermission = (roles: string[], route: RouteRecordRaw) => {
   return routeRoles ? roles.some((role) => routeRoles.includes(role)) : true
 }
 
-const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
+const filterDynamicRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
   const res: RouteRecordRaw[] = []
   routes.forEach((route) => {
     const tempRoute = { ...route }
     if (hasPermission(roles, tempRoute)) {
       if (tempRoute.children) {
-        tempRoute.children = filterAsyncRoutes(tempRoute.children, roles)
+        tempRoute.children = filterDynamicRoutes(tempRoute.children, roles)
       }
       res.push(tempRoute)
     }
@@ -26,26 +26,28 @@ const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
 }
 
 export const usePermissionStore = defineStore("permission", () => {
+  /** 可访问的路由 */
   const routes = ref<RouteRecordRaw[]>([])
-  const dynamicRoutes = ref<RouteRecordRaw[]>([])
+  /** 有访问权限的动态路由 */
+  const addRoutes = ref<RouteRecordRaw[]>([])
 
-  /** 根据角色生成可访问的 Routes（可访问路由 = 常驻路由 + 有访问权限的动态路由） */
+  /** 根据角色生成可访问的 Routes（可访问的路由 = 常驻路由 + 有访问权限的动态路由） */
   const setRoutes = (roles: string[]) => {
-    const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
+    const accessedRoutes = filterDynamicRoutes(dynamicRoutes, roles)
     _set(accessedRoutes)
   }
 
   /** 所有路由 = 所有常驻路由 + 所有动态路由 */
   const setAllRoutes = () => {
-    _set(asyncRoutes)
+    _set(dynamicRoutes)
   }
 
   const _set = (accessedRoutes: RouteRecordRaw[]) => {
     routes.value = constantRoutes.concat(accessedRoutes)
-    dynamicRoutes.value = routeSettings.thirdLevelRouteCache ? flatMultiLevelRoutes(accessedRoutes) : accessedRoutes
+    addRoutes.value = routeSettings.thirdLevelRouteCache ? flatMultiLevelRoutes(accessedRoutes) : accessedRoutes
   }
 
-  return { routes, dynamicRoutes, setRoutes, setAllRoutes }
+  return { routes, addRoutes, setRoutes, setAllRoutes }
 })
 
 /** 在 setup 外使用 */