配置 Web URL 策略

Flutter Web 应用支持两种配置 Web URL 导航的方式：

Hash（默认）

路径的读取和写入均使用 Hash 片段。

例如：flutterexample.dev/#/path/to/screen。

Path（路径）

路径的读取和写入不带 Hash。例如：

flutterexample.dev/path/to/screen.

要将 Flutter 配置为使用路径策略，请使用 Flutter SDK 中提供的 usePathUrlStrategy 函数，该函数位于 flutter_web_plugins 库中。

你不能直接使用 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，请查阅服务器文档，将请求重定向到 index.html。有关如何配置单页应用（SPA）的详细信息，请查看你所用 Web 服务器的文档。

如果你使用的是 Firebase Hosting，请在初始化项目时选择“Configure as a single-page app”（配置为单页应用）选项。有关更多信息，请参阅 Firebase 的 配置重写（Configure rewrites）文档。

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

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

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