create-sunadmin/template/src/routes/index.ts

sunadmin-template脚手架工具

import type { RouteRecordRaw } from "vue-router";
import { router } from "sunadmin-core";
interface Route {
  path: string;
  page: string;
  name?: string;
  component?: any;
  meta: {
    [key: string]: any;
  };
}
//在此处配置您的页面路由信息,SunAdmin会自动为您加载页面
//路由元信息中的outside属性用于标识是否为框架外部页面路由，
//框架外的路由页面不会在框架内部显示，例如常见的场景入:404页面/登录页等
const routes = [
  {
    path: "/test", // 路由路径,必须以/开头
    page: "../pages/test.vue", // 页面路径,必须以@/开头,SunAdmin会自动为您加载页面
    name: "test",
    meta: {
      outside: false, // 标识是否为框架外部页面路由，外部路由的页面不会在框架内部显示，常见的场景入:404页面/登录页等
    },
  },
];

const getRoutes = (): RouteRecordRaw[] => {
  const routeRecord: RouteRecordRaw[] = [];
  routes.forEach((route: Route) => {
    if (route.path == "/") {
      throw new Error("路由路径不能为/");
    }
    routeRecord.push({
      path: route.path,
      name: route.name,
      component: () => import(/* @vite-ignore */ route.page),
      meta: route.meta,
    });
  });
  return routeRecord;
};
//整理并导出路由配置,供sunadmin底层进行路由加载,sunadmin其实在底层只是调用的vue-router的addRoute方法
//您无需关心sunadmin底层的工作逻辑,只需要按照sunadmin的规范配置路由即可
export { getRoutes };

// 导出router实例，该实例是在sunadmin核心包中创建的,您可以在任何地方使用router实例
//一般情况下您无需过度关心sunadmin核心包的工作逻辑,导出该实例的目的主要是为了保持vue用户的项目结构习惯
//路由的使用方式详见sunadmin文档
export { router };