自动路由
基于文件系统的页面注册
Oiyo 使用“基于文件系统的路由”来维护 src/pages.json。
这页只解释扫描与生成的机制;如果你正在完成“新增页面/分包拆分”等任务,直接看使用指南更快。
自动注册
Oiyo 应用将默认采用 src/pages 以及 src/packages/<root>/pages 作为页面路由目录,自动基于该目录中的文件进行路由注册。
src
├── pages
│ ├── home.vue
│ └── order
│ └── list.vue
└── packages
└── user
└── pages
└── profile.vue
{
"pages": [
{
"path": "pages/home",
"type": "page"
},
{
"path": "pages/order/list",
"type": "page"
}
],
"subPackages": [
{
"root": "packages/user",
"pages": [
{
"path": "pages/profile",
"type": "page"
}
]
},
}
在分包中,若是 “主观型” 的子包,其扫描目录也可以通过 oiyo.config.ts 额外声明。最终扫描结果会被统一生成到 pages.json 的 subPackages 字段中。
oiyo.config.ts
import { defineOiyoConfig } from '@skiyee/oiyo/config'
export default defineOiyoConfig({
dir: {
// 额外的主观子包根列表
subPackages: ['sub-direct', 'sub-nested/order'],
},
})
src
├── sub-direct
│ └── order
│ └── list.vue
└── sub-nested
└── order
└── pages
└── detail.vue
{
"subPackages": [
{
"root": "sub-direct",
"pages": [
{
"path": "order/list",
"type": "page"
}
]
},
{
"root": "sub-nested/order",
"pages": [
{
"path": "pages/detail",
"type": "page"
}
]
}
]
}
需要配置全局页面配置时,请使用
src/pages.config.ts 而非更改 src/pages.json,也可达到相同目的。页面元信息(definePageMeta)
页面级的差异化配置(比如布局、标题、导航栏样式等)通常通过页面内的 definePageMeta() 表达。
字段含义和完整可选项以 API 为准,这里只给最常见的语义示意。
definePageMeta({
layout: 'default',
style: { navigationBarTitleText: '订单列表' },
})
如果你希望某个页面成为“首页”,可以通过
definePageMeta({ type: 'home' }) 表达意图。更复杂的首页/首屏策略建议交给业务逻辑处理。