配置 Web 上的 URL 策略

Flutter Web 应用支持两种方式来配置 Web 上的基于 URL 的导航

哈希（默认）

路径会读取和写入到哈希片段中。例如，flutterexample.dev/#/path/to/screen。

路径

路径会不带哈希地读取和写入。例如，flutterexample.dev/path/to/screen。

要配置 Flutter 使用路径，请使用 flutter_web_plugins 库（Flutter SDK 的一部分）提供的 usePathUrlStrategy 函数。

你无法直接使用 pub add 添加 flutter_web_plugins。将其作为 Flutter SDK 依赖项包含在你的 pubspec.yaml 文件中

dependencies:
  flutter:
    sdk: flutter
  flutter_web_plugins:
    sdk: flutter

然后在 runApp 之前调用 usePathUrlStrategy 函数

import 'package:flutter_web_plugins/url_strategy.dart';

void main() {
  usePathUrlStrategy();
  runApp(ExampleApp());
}

PathUrlStrategy 使用 History API，这需要对 Web 服务器进行额外的配置。

要配置你的 Web 服务器以支持 PathUrlStrategy，请查阅你的 Web 服务器文档，将请求重写到 index.html。有关如何配置单页应用的详细信息，请查阅你的 Web 服务器文档。

如果你正在使用 Firebase Hosting，请在初始化项目时选择“配置为单页应用”选项。有关更多信息，请参阅 Firebase 的配置重写文档。

通过运行 flutter run -d chrome 创建的本地开发服务器配置为优雅地处理任何路径并回退到你的应用的 index.html 文件。

更新 web/index.html 中的 <base href="/"> 标签为你应用托管的路径。例如，要在 my_app.dev/flutter_app 托管你的 Flutter 应用，请将此标签更改为 <base href="/flutter_app/">。

发布版本支持相对 base href 标签，但它们必须考虑到页面提供服务的完整 URL。这意味着对于请求 /flutter_app/、/flutter_app/nested/route 和 /flutter_app/nested/route/，相对 base href 将有所不同（例如，分别为 "."、".." 和 "../.."）。