Flutter Web如何保留URL参数避免页面刷新失败

方案一：切换到Path URL策略（推荐） #

Flutter Web默认用Hash路由（地址栏带#），启动时会自动剥离query参数，换成Path模式就能让参数一直保留在地址栏里。

步骤：

• 在pubspec.yaml中添加依赖：

  dependencies:
    url_strategy: ^0.2.0
  

• 在main.dart的main函数里初始化路径策略：

  import 'package:flutter/material.dart';
  import 'package:url_strategy/url_strategy.dart';
  
  void main() {
    // 启用Path URL策略，移除地址栏的#
    setPathUrlStrategy();
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Web Demo',
        debugShowCheckedModeBanner: false,
        home: const HomePage(),
      );
    }
  }
  
  class HomePage extends StatefulWidget {
    const HomePage({super.key});
  
    @override
    State<HomePage> createState() => _HomePageState();
  }
  
  class _HomePageState extends State<HomePage> {
    String? userId;
  
    @override
    void initState() {
      super.initState();
      // 获取URL参数，同时处理参数为空的情况
      userId = Uri.base.queryParameters['id'] ?? '';
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: const Text('参数测试')),
        body: Center(
          child: Text('当前用户ID：$userId'),
        ),
      );
    }
  }
  

配置完成后，启动应用地址栏会保持http://localhost:49844/?id=105897，刷新页面参数也不会丢失。

方案二：保留Hash模式，避免参数失效 #

如果不想切换Path模式，也可以直接在页面中每次从Uri.base获取参数（刷新时依然能读取到），或者把参数同步到初始路由中：

MaterialApp(
  title: 'Flutter Web Demo',
  debugShowCheckedModeBanner: false,
  // 将参数拼接到初始路由里
  initialRoute: '/?id=${Uri.base.queryParameters['id'] ?? ''}',
  home: const HomePage(),
);

这种方式地址栏会显示http://localhost:49844/#/?id=xxx，刷新时依然可以通过Uri.base.queryParameters['id']拿到参数，不会导致应用运行失败。

注意事项 #

• 使用Path模式时，生产环境部署需要配置Web服务器的 fallback 规则（比如Nginx将所有请求转发到index.html），否则刷新页面会出现404错误；本地开发用flutter run无需额外配置。
• 必须处理参数为null的情况，避免空指针异常。

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