Flutter Auto Route Web端返回按钮异常：跳转首页而非上一页

问题根源 #

1. Web端启用pathUrlStrategy后，AutoRoute需要将页面参数序列化到URL中，否则返回时无法恢复必填参数，导致页面加载失败并跳转至首页。
2. MyRouter在MaterialApp的builder方法中每次构建都会重新实例化，导致路由栈状态丢失，无法正确回溯页面。

修复方案 #

1. 全局初始化Router实例 #

将Router实例改为全局变量，避免每次页面构建时重建，保证路由状态的持续性：

// imports
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:url_strategy/url_strategy.dart';

import 'main.gr.dart';

// 全局初始化Router实例，确保状态不丢失
final appRouter = MyRouter();

main() {
  setPathUrlStrategy();
  runApp(MyApp());
}

// main app widget
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'My App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routerDelegate: appRouter.delegate(),
      routeInformationParser: appRouter.defaultRouteParser(),
    );
  }
}

2. 配置路由参数的URL序列化 #

在路由定义中为带参数的页面添加路径参数，让AutoRoute能将参数编码到URL中，返回时可从URL解析参数：

// router definition
@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(page: HomePage, initial: true, name: "HomePageRoute"),
    // 配置路径参数:sampleParameter，与页面参数对应
    AutoRoute(page: Page1Page, name: "Page1PageRoute", path: '/page1/:sampleParameter'),
    AutoRoute(page: Page2Page, name: "Page2PageRoute", path: '/page2/:sampleParameter'),
  ],
)
class $MyRouter {}

3. 标注参数的传递方式 #

使用AutoRoute的@pathParam注解明确参数与URL路径的关联，确保序列化/反序列化正常：

// page 1
class Page1Page extends StatelessWidget {
  // 用@pathParam绑定URL路径中的参数
  final int sampleParameter;

  const Page1Page({super.key, @pathParam required this.sampleParameter});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            AutoRouter.of(context).push(Page2PageRoute(sampleParameter: 0));
          },
          child: Text('Go to Page 2'),
        ),
      ),
    );
  }
}

// page 2
class Page2Page extends StatelessWidget {
  final int sampleParameter;
  const Page2Page({super.key, @pathParam required this.sampleParameter});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
      ),
      body: Center(
        child: Text('This is Page 2'),
      ),
    );
  }
}

最后步骤 #

修改完成后，重新生成路由代码：

flutter pub run build_runner build

此时Web端点击浏览器返回按钮将正确回溯到上一页，且不会出现参数丢失的控制台错误。

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