在網頁上設定 URL 策略

Flutter 網頁應用程式支援兩種在網頁上設定基於 URL 導航的方式

雜湊 (預設)

路徑會讀取和寫入至 雜湊片段。例如，flutterexample.dev/#/path/to/screen。

路徑

路徑會讀取和寫入，不帶雜湊。例如，flutterexample.dev/path/to/screen。

若要將 Flutter 設定為改用路徑，請使用 usePathUrlStrategy 函式，該函式由 flutter_web_plugins 函式庫提供，此函式庫是 Flutter SDK 的一部分。

您無法使用 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，這需要對網頁伺服器進行額外的設定。

若要設定您的網頁伺服器以支援 PathUrlStrategy，請查閱您的網頁伺服器文件，以將請求重新導向至 index.html。請查閱您的網頁伺服器文件，以取得關於如何設定單頁應用程式的詳細資訊。

如果您使用 Firebase Hosting，請在初始化您的專案時選擇「Configure as a single-page app (設定為單頁應用程式)」選項。如需更多資訊，請參閱 Firebase 的 設定重寫 文件。

透過執行 flutter run -d chrome 建立的本機開發伺服器已設定為妥善處理任何路徑，並回溯到您應用程式的 index.html 檔案。

將 web/index.html 中的 <base href="/"> 標籤更新為您的應用程式託管的路徑。例如，若要將您的 Flutter 應用程式託管在 my_app.dev/flutter_app，請將此標籤變更為 <base href="/flutter_app/">。

相對的 base href 標籤支援發行版本，但它們必須考量頁面所服務的完整 URL。這表示對於 /flutter_app/、/flutter_app/nested/route 和 /flutter_app/nested/route/ 的請求，相對的 base href 將會有所不同 (例如，分別為 "."、".." 和 "../..")。

除非另有說明，否則本網站上的文件反映 Flutter 的最新穩定版本。頁面上次更新於 2024-10-16。 檢視來源 或 回報問題。