tp_router: 再也不用手动写路由表了

用过 go_router 和 auto_router 的都知道，路由表还是要自己手写。

页面一多，维护起来是真的烦。改个路径要改好几个地方，参数传递还容易出错。

TpRouter 就是干这个的：加个注解，路由表自动生成，参数类型安全。

tp = teleport（传送），就像 LOL 里的传送技能，一键到达目的地。

看代码

以前怎么写

dart 复制代码

// 定义路由表
final routes = {
  '/user': (context) => UserPage(
    id: int.parse(ModalRoute.of(context)!.settings.arguments as String),
  ),
};

// 跳转
Navigator.pushNamed(context, '/user', arguments: '42');

参数是字符串，类型不安全，运行时才知道错了。

现在怎么写

dart 复制代码

// 加个注解，构造函数参数自动识别
@TpRoute(path: '/user/:id')
class UserPage extends StatelessWidget {
  final int id;  // 自动从路径解析
  final String section;
  
  const UserPage({
    required this.id,
    this.section = 'profile',
    super.key,
  });
}

// 注解会生成 UserRoute 对象
// 跳转就是调用 .tp()
UserRoute(id: 42, section: 'posts').tp(context);

运行 dart run build_runner build，路由表自动生成。

核心功能

注解驱动 - 在页面类上加 @TpRoute，路由表自动生成
类型安全 - 构造函数参数自动映射，编译时检查类型
API 简单 - .tp(context) 一键传送

对比 auto_route

auto_route 也用注解，但还是要手写路由表：

dart 复制代码

@AutoRoute()
class UserPage extends StatelessWidget { ... }

// 还要在 @AutoRouterConfig 里手动配置
@AutoRouterConfig(routes: [
  AutoRoute(page: UserRoute.page, path: '/user/:id'),
  AutoRoute(page: HomeRoute.page, path: '/'),
  // 页面一多，这里就很长...
])
class AppRouter extends RootStackRouter {}

TpRouter 不用。 加完注解直接 build，路由表全自动生成，零配置。

dart 复制代码

@TpRoute(path: '/user/:id')  // 路径写在这里
class UserPage extends StatelessWidget { ... }

// main.dart 只需要
final router = TpRouter(routes: tpRoutes);  // 自动生成的列表

页面越多，优势越明显。

其他功能

重定向守卫

dart 复制代码

FutureOr<TpRouteBase?> checkAuth(BuildContext context, ProtectedRoute route) {
  if (!AuthService.isLoggedIn) {
    return const LoginRoute();
  }
  return null;
}

@TpRoute(path: '/protected', redirect: checkAuth)
class ProtectedPage extends StatelessWidget { ... }

Shell 路由（底部导航栏）

dart 复制代码

@TpShellRoute(navigatorKey: 'main', isIndexedStack: true)
class MainShell extends StatelessWidget { ... }

@TpRoute(path: '/', parentNavigatorKey: 'main', branchIndex: 0)
class HomePage extends StatelessWidget { ... }

安装

yaml 复制代码

dependencies:
  tp_router: ^0.1.0
  tp_router_annotation: ^0.1.0

dev_dependencies:
  build_runner: ^2.4.0
  tp_router_generator: ^0.1.0

dart 复制代码

void main() {
  final router = TpRouter(routes: tpRoutes);
  runApp(MaterialApp.router(routerConfig: router.routerConfig));
}

链接

GitHub: github.com/lwj1994/tp_...
pub.dev: pub.dev/packages/tp...