Flutter使用auto_route嵌套路由时如何跳转到底部导航外页面

问题原因 #

1. context.navigateTo默认作用于当前组件对应的最近层级导航栈：你在Dashboard子页面调用该方法时，匹配范围仅为DashboardRouter下的子路由表，而ProfileRouter是和DashboardRouter平级的HomePage子路由，不在当前子栈的匹配范围内，因此跳转无响应。
2. 你配置的AutoTabsScaffold底部Tab路由列表未包含ProfileRouter，因此即使调用根层级的navigateTo也无法切换到该未注册的Tab路由。

解决方案 #

根据你的交互需求选择对应方案即可：

方案1：跳转后隐藏底部导航栏（通用全局详情页场景，推荐） #

将ProfileRouter提升到和HomePage平级的根路由层级，避免受底部Tab导航栈约束：

routes: [
  // 新增根层级Profile路由
  AutoRoute(
    path: '/profile',
    name: 'ProfileRouter',
    page: ProfilePage,
  ),
  AutoRoute(
    path: '/',
    page: HomePage,
    children: [
      // 此处删除原有ProfileRouter配置
      ...// 其余原有Home子路由保持不变
    ],
  ),
],

修改后全应用任意位置都可以直接调用跳转，跳转后底部导航栏自动隐藏：

onTap: () {
  context.push(ProfileRouter(playerId: 'Test'));
}

方案2：跳转后保留底部导航栏 #

不需要修改路由配置，直接调用根路由栈的push方法将Profile页面压入根Tab栈中，底部导航栏会持续展示：

onTap: () {
  context.rootRouter.push(ProfileRouter(playerId: 'Test'));
}

注意：该场景下需要在ProfilePage的导航栏中添加返回按钮，调用context.pop()即可回到之前的Tab页面。

内容的提问来源于stack exchange，提问作者Sebb