页面注册

基于文件的路由系统,生成主包页面、分包页面、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.navigateTo
  • uni.redirectTo
  • uni.reLaunch
  • uni.switchTab

uni.switchTab() 中,Oiyo 只会为声明了 definePageMeta({ tab }) 的页面提供路径提示。

使用时注意点:

  1. 跳转路径使用以 / 开头的完整路径。
  2. 分包页面使用完整分包路径。

与 pages.json 的关系

Oiyo 的页面系统不是取消 pages.json,而是让 pages.json 成为生成结果。

输入来源:

页面文件
definePageMeta()
src/pages.config.ts

输出结果:

src/pages.json

开发时更推荐维护输入来源,而不是手写 pages.json

验证可用

新增文件后可以检查:

  1. 页面是否在 src/pages.json 中注册。
  2. 主包页面是否写入 pages
  3. 分包页面是否写入 subPackages
  4. 使用跳转 API 时是否获得页面路径提示。