Flutter Web：不推送命名路由仅更新地址栏URL的实现方法

一、可用插件方案 #

推荐使用url_strategy插件，它支持跨平台开发，不会影响移动端构建，可直接修改地址栏URL而不触发路由跳转：

1. 在pubspec.yaml中添加依赖：

dependencies:
  url_strategy: ^0.2.0

2. 在main()函数中初始化URL策略：

import 'package:url_strategy/url_strategy.dart';

void main() {
  setPathUrlStrategy(); // 启用路径式URL策略
  runApp(MyApp());
}

3. 封装更新URL的方法：

import 'package:url_strategy/url_strategy.dart';

void updateUrlWithoutNavigation(String newPath) {
  // shouldReplace设为true，替换当前历史记录条目，避免新增后退记录
  updateBrowserUrl(newPath, shouldReplace: true);
}

二、无插件方案：直接调用JavaScript函数 #

如果不想依赖插件，可通过dart:js包（跨平台安全，移动端构建会自动忽略）调用浏览器原生API：

1. 封装调用函数：

import 'dart:js' as js;

void updateAddressBar(String newUrl) {
  // 调用history.replaceState，仅更新地址栏，不触发页面或路由跳转
  js.context.callMethod('history.replaceState', [null, '', newUrl]);
}

这个方法直接操作浏览器历史记录，完全不会改变Flutter内部的路由状态，完全符合你的需求。

三、为什么Navigator.pushNamed不符合需求 #

你提供的代码：

onPressed: () {
  Navigator.pushNamed(context, '/second');
}

会同时触发Flutter路由栈的变化和地址栏更新，这是因为Flutter Web默认路由策略会同步路由状态与地址栏。而我们需要的是仅修改地址栏，不改变Flutter内部路由状态，因此上面两种方案更适配。

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