You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter AutoRoute v6.X.X 命名导航带路径参数跳转问题求助

解决auto_route命名导航传递路径参数的问题

1. 检查并修正路由配置

确保ProductRoute作为HomeRoute的子路由时,path参数设置正确,同时确认生成的路由路径:

// 示例路由配置
@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: [
    AutoRoute(
      path: '/home',
      page: HomePage,
      children: [
        // 子路由path设为':id',完整路径为父路由path + '/:id'
        AutoRoute(path: ':id', page: ProductPage),
      ],
    ),
  ],
)
class AppRouter extends _$AppRouter {}

运行flutter pub run build_runner build重新生成路由代码,之后查看生成的app_router.gr.dart文件,确认ProductRoute的path值是否为'/home/:id'。

2. 正确使用pushNamed方法

确保路径字符串中的参数值正确替换,且路径完全匹配生成的路由路径:

// 基于路径的命名导航写法
context.router.pushNamed('/home/${product.id}');

3. 基于路由名称的参数传递(可选)

如果在路由配置中给ProductRoute设置了独立name,也可以通过名称配合参数传递:

// 路由配置中添加name属性
AutoRoute(path: ':id', name: 'ProductRoute', page: ProductPage),

调用时直接使用路由名称+路径参数:

context.router.pushNamed('ProductRoute', pathParams: {'id': product.id.toString()});

4. 排查常见问题

  • 确认调用pushNamed的上下文属于HomeRoute的导航栈:BottomNavigationBar的页面对应独立导航栈,需确保操作上下文在HomePage所属的路由范围内。
  • 核对生成的app_router.gr.dart文件:查看ProductRoute的path和name属性,确保调用方式与生成的路由定义完全匹配。

内容的提问来源于stack exchange,提问作者Roman Novoselov

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.23 18:33:06