页面注册
基于文件的路由系统,生成主包页面、分包页面、TabBar
路由系统让页面文件成为 pages.json 的来源。只需要创建页面文件,Oiyo 会生成页面注册所需的配置和类型提示。
它解决的问题是:页面越来越多时,手写和维护 pages.json 容易遗漏、重复和路径出错。
能力定位
主要负责:
- 从约定目录中识别主包页面和分包页面。
- 自动在
src/pages.json中注册页面。
只需要维护页面文件和页面元信息,而不是手动维护 pages.json。
主包页面
主包页面放在 src/pages 目录中:
目录结构
src
└─ pages
├─ home
│ └── index.vue
└─ my
└── index.vue
生成结果:
src/pages.json
{
"pages": [
{ "path": "pages/home/index" },
{ "path": "pages/my/index" }
]
}
跳转路径:
uni.navigateTo({ url: '/pages/home/index' })
当你使用跳转 API 时,类型提示系统会显示 url 路径,同时 Oiyo 会自动协助区分可被不同 API 使用的路径。
分包页面
分包页面放 src/packages/<root>/pages 目录中,<root> 是分包的命名:
目录结构
src
└─ packages
└─ order
└─ pages
├─ list
│ └─ index.vue
└─ detail
└─ index.vue
生成结果:
src/pages.json
{
"subPackages": [
{
"root": "packages/order",
"pages": [
{ "path": "pages/list/index" },
{ "path": "pages/detail/index" }
]
}
]
}
跳转路径:
uni.navigateTo({ url: '/packages/order/pages/list/index' })
跳转路径检查
路由系统会自动让常用 uni 跳转方法识别页面路径。
主包页面:
src/pages/my/index.vue -> /pages/my/index
分包页面:
src/packages/root/pages/page/index.vue -> /packages/root/pages/page/index
页面中正常写 uni 跳转:
uni.navigateTo({ url: '/pages/my/index' })
uni.navigateTo({ url: '/packages/root/pages/page/index' })
Oiyo 会增强这些方法的 url:
uni.navigateTouni.redirectTouni.reLaunchuni.switchTab
在 uni.switchTab() 中,Oiyo 只会为声明了 definePageMeta({ tab }) 的页面提供路径提示。
使用时注意点:
- 跳转路径使用以
/开头的完整路径。 - 分包页面使用完整分包路径。
与 pages.json 的关系
Oiyo 的页面系统不是取消 pages.json,而是让 pages.json 成为生成结果。
输入来源:
页面文件
definePageMeta()
src/pages.config.ts
输出结果:
src/pages.json
开发时更推荐维护输入来源,而不是手写 pages.json。
验证可用
新增文件后可以检查:
- 页面是否在
src/pages.json中注册。 - 主包页面是否写入
pages。 - 分包页面是否写入
subPackages。 - 使用跳转 API 时是否获得页面路径提示。