Web 上での URL 戦略の構成

コンテンツ

Flutter Web アプリは 2 つの構成方法をサポートしています Web 上の URL ベースのナビゲーション:

ハッシュ (デフォルト): パスは読み書きされます。ハッシュフラグメント。例えば、flutterexample.dev/#/path/to/screen。
道: パスはハッシュなしで読み書きされます。例えば、flutterexample.dev/path/to/screen。

URL戦略の構成

代わりにパスを使用するように Flutter を設定するには、usePathUrl戦略によって提供される機能flutter_web_plugins図書館 SDK 内:

import 'package:flutter_web_plugins/url_strategy.dart';

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

PathUrlStrategy は履歴API、追加が必要です Webサーバーの設定。

PathUrlStrategy をサポートするように Web サーバーを構成するには、Web サーバーのリクエストを書き換えるためのドキュメントindex.html.Webサーバーのシングルページアプリの構成方法の詳細については、ドキュメントを参照してください。

Firebase Hosting を使用している場合は、「シングルページアプリとして設定」を選択します。プロジェクトを初期化するときのオプション。詳細については、Firebase を参照してください。リライトの構成ドキュメンテーション。

を実行して作成されたローカル開発サーバーflutter run -d chromeに設定されていますあらゆるパスを適切に処理し、アプリのパスにフォールバックします。index.htmlファイル。

を更新します<base href="/">タグインweb/index.htmlアプリがホストされているパスへ。たとえば、Flutter アプリをホストするにはmy_app.dev/flutter_app、変化このタグを<base href="/flutter_app/">。