tarojs-router-next:Taro小程序路由库的全面指南

Viewed 0

tarojs-router-next

它是一个小巧的 Taro(小程序)路由库,为你提供以下特性:

  • 自动生成带参数类型提示的路由方法
  • 允许传递任意类型、任意大小的参数数据
  • 同步的路由方法调用
  • koa 体验一致的路由中间件

快速开始

安装核心依赖

$ npm install --save tarojs-router-next

安装路由方法自动生成插件

$ npm install --dev tarojs-router-next-plugin

在编译配置(/config/index.js)的 plugins 字段中引入插件:

const config = {
  plugins: ['tarojs-router-next-plugin'],
}

更多详细内容可参考使用文档和 API 文档,以及提供的 Demo 代码示例。

解决什么问题

  1. 路由跳转的页面 url 没有类型提示容易输错
  2. 路由传参需要手动拼接参数、无法携带任意类型、任意大小的数据
  3. 路由方法是异步的,页面通过 EventChannel 通信,事件的回调方法可读性差、耦合度高、只能在回调内部处理异常
  4. 路由跳转的鉴权等实现起来比较麻烦

如何解决

1. 路由跳转的页面 url 没有类型提示容易输错

tarojs-router-next 不需要使用者手写页面 url,它会监听项目 src/pages 内容变化,自动为使用者生成对应的路由方法并附加到 Router 类上。例如,根据页面结构自动生成 Router.to** 系列方法,全部挂在 Router 类上,从而提供类型安全的路由跳转。

2. 路由传参需要手动拼接参数、无法携带任意类型、任意大小的数据

tarojs-router-next 允许直接传递一个对象给 params,它会将 params 展开拼接到 url 后面。此外,还可以接收一个 data 参数,用于传递任意类型和任意大小的数据,极大地提高了传参的灵活性。

3. 路由方法是异步的,页面通过 EventChannel 通信,事件的回调方法可读性差、耦合度高、只能在回调内部处理异常

tarojs-router-next 的路由跳转会返回一个 Promise,支持使用 async/await 编写同步风格的代码,从而改善代码可读性和错误处理能力。详细用法可参考同步路由方法的相关文档。

4. 路由跳转的鉴权等实现起来比较麻烦

tarojs-router-next 提供了易于理解和使用的路由中间件功能,可以方便地实现路由鉴权等逻辑,具体可查阅路由中间件的指南部分。

平台与框架支持

框架

支持所有 Taro 可支持的框架,包括 React、Vue、Vue3 和 Nerv。

小程序

理论上支持所有 Taro 可支持的小程序平台,目前已在微信小程序、QQ小程序、支付宝小程序测试通过。

H5

支持 H5 环境。

React Native

暂不支持 React Native。

0 Answers