Flutter Web刷新浏览器后返回根页面，如何保持在当前页面？

1. 启用Path URL策略（可选但推荐） #

默认Flutter Web使用哈希路由（如/#/pageB），启用Path URL策略可让URL更符合浏览器原生路由逻辑（如/pageB），同时提升刷新恢复的可靠性。

在main.dart的入口函数中配置：

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void main() {
  setUrlStrategy(PathUrlStrategy());
  runApp(const MyApp());
}

2. 使用原生路由绑定URL #

通过MaterialApp.router自定义路由逻辑，将页面路由与浏览器URL同步，确保刷新时Flutter能读取URL恢复对应页面。

实现步骤： #

• 定义路由常量：

class AppRoutes {
  static const root = '/';
  static const pageB = '/pageB';
}

• 替换MaterialApp为MaterialApp.router：

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Web Route Demo',
      routerDelegate: DefaultRouterDelegate(
        routeInformationParser: DefaultRouteInformationParser(),
        routerConfig: RouterConfig(
          routes: [
            MaterialPageRoute(path: AppRoutes.root, builder: (_) => const PageA()),
            MaterialPageRoute(path: AppRoutes.pageB, builder: (_) => const PageB()),
          ],
        ),
      ),
      routeInformationParser: DefaultRouteInformationParser(),
    );
  }
}

• 导航时使用命名路由：

// 在PageA中跳转至PageB
ElevatedButton(
  onPressed: () => Navigator.pushNamed(context, AppRoutes.pageB),
  child: const Text('Go to Page B'),
)

此时跳转到PageB时浏览器URL会更新为/pageB，刷新后Flutter会根据URL自动加载PageB。

3. 使用GoRouter（更简洁的官方方案） #

GoRouter是Flutter官方推荐的路由库，内置Web路由同步逻辑，配置更简单且兼容性更好。

步骤： #

• 添加依赖到pubspec.yaml：

dependencies:
  go_router: ^12.0.0 # 请使用最新版本

• 配置GoRouter实例：

final GoRouter _router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const PageA(),
    ),
    GoRoute(
      path: '/pageB',
      builder: (context, state) => const PageB(),
    ),
  ],
);

• 在应用中使用路由：

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Web GoRouter Demo',
      routerConfig: _router,
    );
  }
}

• 导航调用：

// 在PageA中跳转
ElevatedButton(
  onPressed: () => context.go('/pageB'),
  child: const Text('Go to Page B'),
)

GoRouter会自动同步路由状态到浏览器URL，刷新页面时直接读取URL恢复对应页面，无需额外状态保存逻辑。

核心原理 #

Flutter Web刷新时会重新初始化应用，内存中的路由状态会丢失。解决的关键是将路由信息与浏览器URL双向绑定，让应用启动时能通过URL中的路径参数，还原到刷新前的页面状态。

内容的提问来源于stack exchange，提问作者Thái Quốc Toàn