仓库

使用方法

使用npm i taro-app-router下载插件后在config/index.ts中注册插件

const config = {
    //...
    plugins:["taro-app-router"],
}

路由约定

默认采用与next.js中app-router相同的规范.

src
├── app
|  ├── page.config.ts
|  └── page.tsx
├── app.config.ts
├── app.tsx
└── index.html

src是taro项目sourcePath.插件默认在此目录的app文件夹下寻找page.tsx(或.jsx,.ts,.js),将这些文件的路径作为路由加入app.config.ts中.上述文件结构可以得到路由为['app/page].每个页面的配置文件名称与页面文件相同,为page.config.ts.
可以自定义插件参数.参数config指代路由所在配置文件名,默认值'app.config.ts';参数root指代跟路由,默认值'app';参数page指代页面文件名,默认值'page'.

实现

插件实现函数createRouter用于按照文件结构生成路由,读取当前配置,如果配置中的路由与生成路由不同,则更新路由配置.在插件注册时和webpack热重载事件watchRun中,调用createRouter更新路由.由于此函数仅在路由不同时更新文件,在watchRun事件中对它的调用不会导致无限循环.