Vue 路由

路由目录

@/router下

路由白名单

不需要登录也能访问的路由 默认登录页 oauth授权/登录是不需要登录的

配置在@/router/guard/permissionGuard.ts

const LOGIN_PATH = PageEnum.BASE_LOGIN;
const SOCIAL_LOGIN = PageEnum.SOCIAL_LOGIN;

// const ROOT_PATH = RootRoute.path;

// const ROOT_PATH = RootRoute.path;
// 白名单路由 即不登录也能访问的路由
// 白名单路由 即不登录也能访问的路由
// 默认 登录页 oauth页
const whitePathList: PageEnum[] = [LOGIN_PATH, SOCIAL_LOGIN];

非后台返回的路由(不会在菜单显示)

非后台返回的路由 比如个人中心 OSS配置等 路径@/router/routes/modules/local.ts

/**
 * 这里放本地路由  就是后台没有包含的
 * 默认登录后才能访问
 * 白名单路径: router/guard/permissionGuard.ts
 * 注意 component: LAYOUT 一定要有
 */
export const localRoutes: AppRouteModule[] = [
  // 自行添加
];

在src/router/routes/index.ts完成引入(已经引入 只需要配置就行)

// Basic routing without permission
// 基本路由 就是不在后台返回内容中的路由
export const basicRoutes = [
  LoginRoute,
  RootRoute,
  REDIRECT_ROUTE,
  PAGE_NOT_FOUND_ROUTE,
  ...localRoutes,
];

需要添加本地菜单, 比如 仪表盘, 关于 参考 src\store\modules\permission.ts

// 这里是本地路由  需要在这里添加 或者直接在route/routes/index里添加
const customRoutes = [dashboard, about];
// 根据顺序排序 即 仪表盘 后台路由 关于 (添加到菜单中)
const backMenuList = transformRouteToMenu([dashboard, ...routeList, about]);
this.setBackMenuList(backMenuList);

路由守卫

路径src/router/guard/permissionGuard.ts

自行按照需求修改

登录后默认页面

文件路径src/enums/pageEnum.ts, 修改路径即可

export enum PageEnum {
  // basic home path
  BASE_HOME = "/dashboard/workbench",
}