配置 Web 应用的 URL 策略

Flutter Web 应用支持两种基于 URL 的路由的配置方式:

Flutter web apps support two ways of configuring URL-based navigation on the web:

Hash(默认)
路径使用 # + 锚点标识符 读写,例如:flutterexample.dev/#/path/to/screen

Hash (default)
Paths are read and written to the hash fragment. For example, flutterexample.dev/#/path/to/screen.

Path
路径使用非 # 读写,例如:flutterexample.dev/path/to/screen

Path
Paths are read and written without a hash. For example, flutterexample.dev/path/to/screen.

使用 setUrlStrategy API 设置 HashUrlStrategy 或者 PathUrlStrategy

These are set using the setUrlStrategy API with either a HashUrlStrategy or PathUrlStrategy.

配置 URL 策略

Configuring the URL strategy

setUrlStrategy API 只能在 Web 平台使用。下方的内容将介绍如何在 Web 平台下(仅在 Web 平台可用)使用条件引入的方式来调用此方法。

The setUrlStrategy API can only be called on the web. The following instructions show how to use a conditional import to call this function on the web, but not on other platforms.

  1. Include the flutter_web_plugins package and call the setUrlStrategy function before your app runs:引入 flutter_web_plugins package,并在你的应用启动前调用 setUrlStrategy 方法:

      dependencies:
        flutter_web_plugins:
          sdk: flutter
    
  2. Create a lib/configure_nonweb.dart file with the following code:创建如下的 lib/configure_nonweb.dart 文件:

      void configureApp() {
        // No-op.
      }
    
  3. Create a lib/configure_web.dart file with the following code:创建如下的 lib/configure_web.dart 文件:

      import 'package:flutter_web_plugins/flutter_web_plugins.dart';
    
      void configureApp() {
        setUrlStrategy(PathUrlStrategy());
      }
    
  4. Open `lib/main.dart` and conditionally import `configure_web.dart` when the `html` package is available, or `configure_nonweb.dart` when it isn't:
    打开 `lib/main.dart`,当 `html` 包可用时,使用条件引入的方式引入 `configure_web.dart`,否则引入 `configure_nonweb.dart`:

      import 'package:flutter/material.dart';
      import 'configure_nonweb.dart' if (dart.library.html) 'configure_web.dart';
    
      void main() {
        configureApp();
      runApp(MyApp());
      }
    

将 Flutter 应用部署在子目录下

Hosting a Flutter app at a non-root location

更新 web/index.html 中的 <base href="/"> 标签为你的应用部署路径。例如:如果你期望将 Flutter 应用部署在 myapp.dev/flutter_app,则更改此标签为 <base href="/flutter_app">

Update the <base href="/"> tag in web/index.html to the path where your app is hosted. For example, to host your Flutter app at myapp.dev/flutter_app, change this tag to <base href="/flutter_app/">.