{"id":28433364,"url":"https://github.com/log1997/vite-plugin-routes-get","last_synced_at":"2025-06-30T04:32:51.240Z","repository":{"id":93296785,"uuid":"605186028","full_name":"LOG1997/vite-plugin-routes-get","owner":"LOG1997","description":"自动获取路由vite插件","archived":false,"fork":false,"pushed_at":"2023-03-08T00:47:41.000Z","size":122,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-26T05:02:12.684Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LOG1997.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-22T16:20:14.000Z","updated_at":"2023-04-11T16:14:06.000Z","dependencies_parsed_at":"2023-05-05T08:47:49.285Z","dependency_job_id":null,"html_url":"https://github.com/LOG1997/vite-plugin-routes-get","commit_stats":{"total_commits":20,"total_committers":1,"mean_commits":20.0,"dds":0.0,"last_synced_commit":"f6827bce65d9bfe6fd9634db71810f238f2bda83"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LOG1997/vite-plugin-routes-get","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LOG1997%2Fvite-plugin-routes-get","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LOG1997%2Fvite-plugin-routes-get/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LOG1997%2Fvite-plugin-routes-get/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LOG1997%2Fvite-plugin-routes-get/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LOG1997","download_url":"https://codeload.github.com/LOG1997/vite-plugin-routes-get/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LOG1997%2Fvite-plugin-routes-get/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262710165,"owners_count":23351945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-05T18:08:58.846Z","updated_at":"2025-06-30T04:32:51.230Z","avatar_url":"https://github.com/LOG1997.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 自动生成路由\n\n\n\u003e \u003cp style=\"color:red\"\u003e执行build操作的时候不可用，不知道该怎样搞，就是跟vite官网的例子差不多的啊。所以这个模块暂时不可用\u003c/p\u003e\n\n\u003e react和vue3皆可使用\n\n\n\u003e每次新增一个页面文件都要去路由文件再配置一次，真的是太烦了！\n所以就写了一个自动获取路由的插件，只要在路由文件中引入一个虚拟模块，就可以自动获取路由了。\n\n\u003e 初学，写得比较菜，性能以及错误处理考虑不是很全面，欢迎大家指正。\n\n## 使用\n\n### 安装和配置\n```bash\nnpm i vite-plugin-routes-get -D\n```\n### vite配置\n在vite配置文件`vite.config.ts`中引入插件并使用，需要传入参数，如下：\nparams:\ndirname:存放页面的文件夹，非必传，默认为'views'\ndefaultFile:页面文件夹下的默认文件，非必传，默认值为'index'\ntype:指定该插件用于哪个类型的项目，**必传**，可选参数为`vue`和`react`\n```ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport vitePluginRouteGet from 'vite-plugin-routes-get'\nexport default defineConfig({\n  plugins: [react(), vitePluginRouteGet(\n{   dirname:'views',\n   defaultFile:'index',\n   type:'react'}\n  )],\n})\n```\n### 路由配置\n在路由文件中使用，引入虚拟模块`virtual:routes-get`，如下：\n```ts\n// @/router/index.tsx\nimport { routeGet } from 'virtual:routes-get';\n```\n处理一下路由参数，因为`virtual:routes-get`中的路由数组的component返回的是一个字符串，需要转换成函数，如下：\n在`@/router/utils`定义一个转换函数\n#### 路由转换函数\nvue-router的转换函数如下\n```ts\nexport const replaceComponent = (routes: any[]) =\u003e {\n    routes.forEach((item: any) =\u003e {\n        if (item.children \u0026\u0026 item.children.length) {\n            item.component = () =\u003e import(item.componentPath)\n            replaceComponent(item.children)\n        }\n        item.component = () =\u003e import(item.componentPath)\n\n    })\n    return routes\n}\n```\n```ts\n// @/router/utils/replaceComponent.ts\nimport { lazy } from 'react'\nexport const replaceComponent = (routes: any[]) =\u003e {\n    routes.forEach((item: any) =\u003e {\n        if (item.children \u0026\u0026 item.children.length) {\n            item.component = lazy(() =\u003e import('' + item.componentPath));\n            replaceComponent(item.children)\n        }\n        item.component = lazy(() =\u003e import('' + item.componentPath));\n\n    })\n    return routes\n}\n```\n### 在路由文件中使用\n\u003e 后续将封装一个处理路由的函数，实现全自动导入。\n\n生成路由的格式如下：\n**vue**\n```ts\n[\n  {\n    path: '/home',\n    name: 'Home',\n    component: (() =\u003e import('/src/views/Home/index.vue')),\n    children: [],\n    parent: 'views',\n  }\n]\n```\n**react**\n```ts\n[\n  {\n    path: '/home',\n    name: 'Home',\n    component: lazy(() =\u003e import('/src/views/Home')),\n    children: [],\n    parent: 'views',\n  }\n]a\n```\nvue无需特殊操操作，按照正常流程创建路由即可，react还需要进一步操作。\n如果有特殊路由，请一并添加到这个routes数组中\n```ts\nconst autoRoutes = replaceComponent(routeGet);\nconst routes = [\n    {\n        path: \"/\",\n        redirect: \u003cNavigate to=\"/home\" /\u003e,\n    },\n    {\n        component: Layout,\n        children: [\n            ...autoRoutes\n        ]\n    }\n];\n```\n可以放心使用了，后面便是生成路由的操作了\n```ts\nconst generateRoutes = (routes: any) =\u003e {\n    return routes.map((item: any) =\u003e {\n        if (item.children) {\n            generateRoutes(item.children);\n        }\n        item.redirect ? item.element = item.redirect :\n            item.element = \u003cSuspense fallback={\u003cdiv\u003e加载中\u003c/div\u003e}\u003e\n                \u003citem.component /\u003e\n            \u003c/Suspense\u003e\n\n        return item;\n    });\n}\n// 生成路由\nconst Router = () =\u003e {\n    return useRoutes(generateRouter(routes));\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flog1997%2Fvite-plugin-routes-get","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flog1997%2Fvite-plugin-routes-get","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flog1997%2Fvite-plugin-routes-get/lists"}