告别繁琐手工配置！Taro 小程序路由全自动配置方案献给你

2023-10-13 14:09:29

1. 约定式路由的魅力

对于前端开发来说，路由是不可或缺的一部分。在传统的开发模式下，我们需要在代码中手动配置路由规则。然而，当项目变得越来越复杂时，这种方式很容易导致路由管理变得混乱和难以维护。

约定式路由模式的出现，为我们提供了一种更优雅的解决方案。在约定式路由模式下，我们只需按照既定的约定在特定目录下创建文件，系统就会自动生成对应的路由规则。这大大简化了路由的配置过程，使我们能够更加专注于业务逻辑的开发。

Taro 框架作为一款跨端开发框架，也支持约定式路由。在 Taro 中，我们可以在 pages 目录下新建文件，然后使用 @tarojs/router 库提供的 useRouter 钩子函数来获取路由信息。这样，我们就可以在页面组件中轻松地进行页面跳转和参数传递。

2. Taro 路由配置的痛点

尽管 Taro 框架提供了约定式路由功能，但是在实际开发中，我们还是会遇到一些问题。其中最主要的问题之一就是，每新建一个页面文件后，我们需要在 app.config.ts 文件中手动配置页面地址。虽然这只是一个简单的配置步骤，但是当项目中页面数量较多时，很容易就会变得繁琐和容易出错。

此外，在进行页面跳转时，我们还需要指定 pageQuery 对象，以及对路由参数进行 query 转换。这些操作虽然并不复杂，但是却会增加代码的复杂性，并降低开发效率。

3. Taro 路由全自动配置方案

为了解决上述问题，我们可以借助 Taro 的云函数来实现路由的全自动配置。具体步骤如下：

在云函数中创建 index.js 文件，并引入 taro-cloud 库。
在 index.js 文件中定义一个路由配置函数，并在该函数中使用 taro-cloud.router.generateRoutes 方法来自动生成路由规则。
将路由配置函数导出，以便在 app.ts 文件中使用。
在 app.ts 文件中，使用 useCloudRouter 函数将云函数中的路由配置函数作为参数传入。