如何在Flutter Web应用中监听并检测URL地址变化？

1. 使用RouteObserver监听路由变化 #

这是Flutter官方推荐的路由监听方案，能捕获页面跳转、同页面内路由参数变更（比如通过Navigator.pushReplacement或带参数的命名路由跳转）等场景下的URL变化。

• 实现步骤：
  • 自定义RouteObserver子类，重写路由生命周期方法：

    class MyRouteObserver extends RouteObserver<PageRoute<dynamic>> {
      @override
      void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
        super.didPush(route, previousRoute);
        if (route is PageRoute) {
          final currentPath = Uri.base.toString();
          print('URL已更新：$currentPath');
          // 这里编写URL变化后的业务逻辑
        }
      }
    
      @override
      void didReplace({Route<dynamic>? newRoute, Route<dynamic>? oldRoute}) {
        super.didReplace(newRoute: newRoute, oldRoute: oldRoute);
        if (newRoute is PageRoute) {
          final currentPath = Uri.base.toString();
          print('URL已替换：$currentPath');
        }
      }
    
      @override
      void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
        super.didPop(route, previousRoute);
        if (previousRoute is PageRoute) {
          final currentPath = Uri.base.toString();
          print('URL已回退：$currentPath');
        }
      }
    }
    

  • 在应用入口的MaterialApp/CupertinoApp中注册观察者：

    final routeObserver = MyRouteObserver();
    
    MaterialApp(
      navigatorObservers: [routeObserver],
      // 其他应用配置
    );
    

2. 监听浏览器popstate事件 #

如果是直接修改浏览器URL（比如通过window.history.pushState）或用户点击浏览器前进/后退按钮导致的URL变化，可直接监听浏览器原生的popstate事件：

import 'dart:html' as html;
import 'package:flutter/foundation.dart';

void initBrowserUrlListener() {
  if (kIsWeb) {
    html.window.onPopState.listen((_) {
      final currentUrl = html.window.location.href;
      print('浏览器URL变化：$currentUrl');
      // 编写对应处理逻辑
    });
  }
}

注：该方式依赖dart:html库，仅在Web环境生效，建议用kIsWeb做环境判断。

3. GoRouter路由监听（使用GoRouter时） #

如果项目采用go_router管理路由，可通过内置的回调监听URL变化：

final GoRouter _router = GoRouter(
  routes: [/* 你的路由配置 */],
  listener: (context, state) {
    print('路由路径更新：${state.uri}');
    // 处理URL变化逻辑
  },
  redirect: (context, state) {
    // 每次路由变更都会触发redirect，也可在此检测URL
    print('当前路由：${state.uri}');
    return null;
  },
);

注意事项 #

• 同页面内的URL参数变更（比如跳转到同一命名路由但携带不同参数），RouteObserver和GoRouter的监听都能捕获。
• 若手动调用window.history.pushState修改URL，需自行触发业务逻辑，popstate事件仅在用户操作浏览器前进/后退时触发。

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