@ly-js/automatic
@ly-js/automatic
是一个 基于 vite
自动处理的工具库,目前支持路由自动加载,并兼容webpack
。
Install
NPM
npm i @ly-js/automatic --save
YARN
yarn add @ly-js/automatic
pnpm
pnpm add @ly-js/automatic
Usage
使用方式
pages.josn
{
"$schema": "https://www.unpkg.com/@ly-js/automatic/schema/pages.json",
"pages": [
{
"component": "views/system/position/index",
"name": "PositionManage",
"path": "/system/position-manage",
"meta": {
"keepAlive": true
}
},
{
"component": "views/system/position/detail",
"name": "PositionDetail",
"path": "/system/position/:id",
"meta": {
"hidden": true,
"activeMenu": "PositionManage"
}
}
],
"nestedRoutes": [
{
"component": "views/layout/index",
"path": "/",
"name": "Layout",
"redirect": "/dashboard",
"meta": {
"title": "概述"
},
"include": ["views/dashboard"],
"exclude": []
},
{
"component": "views/layout/index",
"path": "/system",
"name": "System",
"redirect": "noRedirect",
"meta": {
"title": "系统管理"
},
"include": ["views/system"],
"exclude": []
}
],
"exclude": ["components", "component", "views/error-page", "views/login"]
}
page.json
{
"$schema": "https://www.unpkg.com/@ly-js/automatic/schema/page.json",
"name": "RoleManage",
"path": "/system/role-manage",
"meta": {
"title": "角色管理",
"keepAlive": true
}
}
{
"$schema": "https://www.unpkg.com/@ly-js/automatic/schema/page.json",
"name": "RoleDetail",
"path": "/system/role/:id",
"meta": {
"title": "角色详情",
"activeMenu": "RoleManage",
"hidden": true
}
}
import { AutoRouter } from '@ly-js/automatic'
// 基础路由
const constantRoutes = []
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: constantRoutes
})
const modules = import.meta.glob(`../views/**/*.(vue|json)`)
// pages 参考上叙json实例
const autoRouter = new AutoRouter(pages, modules, {
basePath: '../views/',
baseMenuPath: 'views/',
router,
lastComponent: [notFindComponent],
page: {
indexFileName: 'index',
detailFileName: 'detail',
detailParamKey: 'id'
}
})
await autoRouter.init()
// 开启默认路由加载
// 默认开启初始化路由
autoRouter.initRouter()
// 默认路由添加
autoRouter.changeInitializeRoutes()
// 可以自行查看改对象
console.log(autoRouter)
// 动态化菜单路由
const treeMenus = [] // 这个类型可以查看typescript定义
const [asyncRoutes, mergeTreeMenus] = autoRouter.getRoutesByMenu(treeMenus)
// 切换动态路由
autoRouter.changeRouter(asyncRoutes)
// mergeTreeMenus 这个为完善后的树形菜单数据
console.log(mergeTreeMenus)