配置 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 將有所不同（例如，分別為 "."、".." 和 "../.."）。