移除动态路由

介绍

本节将讲解如何在 vue3-element-admin 项目中移除动态路由，包括修改路由配置、调整权限控制等。适用于 前端完全掌控路由配置 的场景，尤其是 权限固定的管理后台，无需依赖后端动态路由。

1. 调整路由守卫

在 src/plugins/permission.ts 中，在 router.beforeEach 前置守卫中移除动态路由的生成逻辑。

• 修改前：

// src/plugins/permission.ts
router.beforeEach(async (to, from, next) => {

  const isLogin = !!getToken(); 
  if (isLogin) {
    if (to.path === "/login") {
      next({ path: "/" });
    } else {
      const permissionStore = usePermissionStore();
      // 判断路由是否加载完成
      if (permissionStore.isRoutesLoaded) {
        if (to.matched.length === 0) {
          // 路由未匹配，跳转到404
          next("/404");
        } else {
          // 动态设置页面标题
          const title = (to.params.title as string) || (to.query.title as string);
          if (title) {
            to.meta.title = title;
          }
          next();
        }
      } else {
        try {
          // 生成动态路由
          const dynamicRoutes = await permissionStore.generateRoutes();
          dynamicRoutes.forEach((route: RouteRecordRaw) => router.addRoute(route));
          next({ ...to, replace: true });
        } catch (error) {
          console.error(error);
          // 路由加载失败，重置 token 并重定向到登录页
          await useUserStore().clearUserData();
          redirectToLogin(to, next);
          NProgress.done();
        }
      }
    }
  } else {
    // ... 省略未登录逻辑
  }
});

• 修改后：

// src/plugins/permission.ts
router.beforeEach(async (to, from, next) => {
  NProgress.start();

  const isLogin = !!getToken(); 
  if (isLogin) {
    if (to.path === "/login") {
      next({ path: "/" });
    } else {
      // 移除动态路由改造，generateRoutes 方法需调整静态路由
      usePermissionStore().generateRoutes()

      if (to.matched.length === 0) {
        // 路由未匹配，跳转到404
        next("/404");
      } else {
        // 动态设置页面标题
        const title = (to.params.title as string) || (to.query.title as string);
        if (title) {
          to.meta.title = title;
        }
        next();
      }
    }
  } else {
    // ... 省略未登录逻辑
  }
});

---

2. 修改路由生成

修改 src/store/permission.ts 文件的 generateRoutes 方法，移除动态路由，仅使用静态路由生成菜单。

• 修改前：

// src/store/permission.ts
function generateRoutes() {
  return new Promise<RouteRecordRaw[]>((resolve, reject) => {
    MenuAPI.getRoutes()
      .then((data) => {
        const dynamicRoutes = parseDynamicRoutes(data);
        routes.value = [...constantRoutes, ...dynamicRoutes];
        isRoutesLoaded.value = true;
        resolve(dynamicRoutes);
      })
      .catch((error) => {
        reject(error);
      });
  });
}

• 修改后：

// src/store/permission.ts
function generateRoutes() {
  routes.value = constantRoutes; 
}

3. 静态路由配置

在 src/router/index.ts 文件中，添加系统管理模块的静态路由。

// src/router/index.ts
export const constantRoutes: RouteRecordRaw[] = [
  {
    path: "/login",
    component: () => import("@/views/login/index.vue"),
    meta: { hidden: true },
  },

  {
    path: "/",
    name: "/",
    component: Layout,
    redirect: "/dashboard",
    children: [
      {
        path: "dashboard",
        component: () => import("@/views/dashboard/index.vue"),
        name: "Dashboard",
        meta: {
          title: "dashboard",
          icon: "homepage",
          affix: true,
          keepAlive: true,
        },
      }
    ],
  },
  
  // 移除动态路由，添加对应的静态路由用于测试
  {
    path: "/system",
    component: Layout,
    redirect: "/system/user",
    meta: { title: "系统管理", icon: "system" },
    children: [
      {
        path: "user",
        name: "User",
        component: () => import("@/views/system/user/index.vue"),
        meta: { title: "用户管理", icon: "el-icon-User" },
      },
      {
        path: "role",
        name: "Role",
        component: () => import("@/views/system/role/index.vue"),
        meta: { title: "角色管理", icon: "role" },
      },
    ],
  },
];

4. 预览效果

移除动态路由后，静态路由配置生效，系统模块中的路由如用户管理、角色管理等均可以正常访问。以下为效果截图：