如何让Flutter Web App通过Deep Link仅加载对应单个页面

要实现输入URL直接加载对应页面、不生成多余页面栈的需求，核心是重写onGenerateInitialRoutes来完全控制初始路由栈，而非依赖默认的路由叠加逻辑。以下是具体实现方案：

基于传统路由系统的实现 #

核心代码 #

MaterialApp(
  // 不要设置home属性，避免默认将HomePage加入初始路由栈
  initialRoute: '/', // Flutter Web会自动解析当前URL的路由路径填充此处
  onGenerateInitialRoutes: (String initialRoute) {
    // 解析当前URL的路径和参数
    final Uri uri = Uri.parse(initialRoute);
    Widget targetPage;

    // 根据路径匹配对应页面
    switch (uri.path) {
      case '/':
        targetPage = HomePage();
        break;
      case '/redirect':
        targetPage = RedirectPage();
        break;
      case '/book':
        // 提取query参数
        final String? bookId = uri.queryParameters['id'];
        targetPage = BookPage(id: bookId ?? '');
        break;
      default:
        targetPage = NotFoundPage(); // 处理未匹配的路由
    }

    // 仅返回包含目标页面的路由列表，初始栈就只有这一个页面
    return [MaterialPageRoute(builder: (_) => targetPage)];
  },
  // 保留onGenerateRoute处理页面内的导航跳转（如按钮跳转）
  onGenerateRoute: (RouteSettings settings) {
    final Uri uri = Uri.parse(settings.name ?? '/');
    Widget targetPage;

    switch (uri.path) {
      case '/':
        targetPage = HomePage();
        break;
      case '/redirect':
        targetPage = RedirectPage();
        break;
      case '/book':
        final String? bookId = uri.queryParameters['id'];
        targetPage = BookPage(id: bookId ?? '');
        break;
      default:
        targetPage = NotFoundPage();
    }

    return MaterialPageRoute(builder: (_) => targetPage);
  },
);

关键说明 #

1. 移除home属性：默认情况下设置home会自动将该页面加入初始路由栈，导致访问其他URL时先加载首页再叠加目标页，所以必须去掉。
2. 重写onGenerateInitialRoutes：这个回调负责生成应用启动时的初始路由列表，我们直接返回只包含目标页面的列表，从根源避免多余页面入栈。
3. URL参数解析：通过Uri.parse可以轻松提取路径和query参数，处理/book?id=12这类带参数的路由。

基于GoRouter的推荐实现（Flutter新导航系统） #

如果项目可以迁移到Flutter官方推荐的GoRouter，实现会更简洁，且天然适配Web场景：

final GoRouter router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/redirect',
      builder: (context, state) => RedirectPage(),
    ),
    GoRoute(
      path: '/book',
      builder: (context, state) {
        final String? bookId = state.queryParameters['id'];
        return BookPage(id: bookId ?? '');
      },
    ),
  ],
);

// 在MaterialApp中使用GoRouter
MaterialApp.router(
  routerDelegate: router.routerDelegate,
  routeInformationParser: router.routeInformationParser,
  routeInformationProvider: router.routeInformationProvider,
);

GoRouter默认处理URL时会直接替换路由栈，不会保留之前的页面，完美契合你的需求，同时还支持更多高级路由特性。

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