在Flutter的auto_route包中实现多路径指向同一页面

你直接注册多个AutoRoute指向同一HomeScreen的方式不生效，因为auto_route会判定为重复注册同一路由组件，引发冲突。下面提供两种可行的解决方案：

方案1：使用多路径语法（简单直接） #

auto_route支持在path字段中用|分隔多个路径，这样所有指定的路径都会映射到同一个页面：

@MaterialAutoRouter(
  routes: <AutoRoute>[
    AutoRoute(
      path: '/routeA|/routeB|/routeC|/routeD',
      page: HomeScreen,
    ),
  ]
)

方案2：结合路由参数+重定向（适配Bloc事件场景） #

如果你需要每个路径对应不同的Bloc事件，可以通过路由参数区分逻辑，再给每个路径设置重定向：

路由配置 #

@MaterialAutoRouter(
  routes: <AutoRoute>[
    // 主路由，用于接收事件类型参数
    AutoRoute(
      path: '/home',
      page: HomeScreen,
    ),
    // 各路径重定向到带参数的主路由
    AutoRoute(path: '/routeA', redirectTo: '/home?eventType=eventA'),
    AutoRoute(path: '/routeB', redirectTo: '/home?eventType=eventB'),
    AutoRoute(path: '/routeC', redirectTo: '/home?eventType=eventC'),
    AutoRoute(path: '/routeD', redirectTo: '/home?eventType=eventD'),
  ]
)

在HomeScreen中处理参数并触发Bloc事件 #

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取路由携带的事件类型参数
    final eventType = context.routeData.queryParams['eventType'];
    
    // 根据参数触发对应的Bloc事件
    if (eventType == 'eventA') {
      context.read<HomeBloc>().add(const EventA());
    } else if (eventType == 'eventB') {
      context.read<HomeBloc>().add(const EventB());
    }
    // ...处理其他事件分支

    return Scaffold(
      // 页面内容布局
    );
  }
}

这种方式既能实现多路径跳转，还能精准匹配你需要的Bloc事件逻辑。

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