如何从 Flutter web 中的 URL 中删除哈希 (#)

Question

Flutter web项目默认URL定义一个URL包含hashtag(#)，如下：

http://localhost:41521/#/peaple/...

我想删除这个“#”，如下所示：

http://localhost:41521/peaple/

我该如何解决这个问题？

Answer 1

如果您只关心路由，您可以这样做：

onGenerateRoute: (settings) {
    List segments = settings.name.split('/').where((x) => ! x.isEmpty).toList();
    String page = segments.length > 0 ? segments[0] : '';
    ...
  }
}

Answer 2

以下答案复制来自 Mouad Debbar 对 GitHub (see issue comment) 的解释。

以下是它可用后的使用步骤：

在 web/index.html 文件的 <head> 部分添加 <base href="/">。这将自动添加到 flutter create 创建的新项目中。但对于已有的应用，开发者需要手动添加。在 pubspec.yaml 中添加 flutter_web_plugins 依赖项（如果尚不存在）：

dependencies:
  flutter_web_plugins:
    sdk: flutter

添加一个lib/configure_nonweb.dart，内容如下：

void configureApp() {
  // No-op.
}

添加一个lib/configure_web.dart，内容如下：

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void configureApp() {
  setUrlStrategy(PathUrlStrategy());
}

在 lib/main.dart 中，执行以下操作：

import 'package:flutter/material.dart';
import 'configure_nonweb.dart' if (dart.library.html) 'configure_web.dart';

void main() {
  configureApp();
  runApp(MyApp());
}

Answer 3

您现在可以使用简单包和单行代码来删除来自您的 Flutter 网络应用程序的前导哈希 (#)：url_strategy（完全披露：我是作者）

使用`url_strategy`

您只需添加依赖项 as described here，然后将以下函数调用添加到您的 main 函数中：

import 'package:url_strategy/url_strategy.dart';

void main() {
  // Here we set the URL strategy for our web app.
  // It is safe to call this function when running on mobile or desktop as well.
  setPathUrlStrategy();
  runApp(MyApp());
}

您只需拨打 setPathUrlStrategy 即可

该包还确保运行宁代码不会在移动设备上崩溃（见下文）。此外，如果您在 stable 上构建移动应用程序并且仅在 beta.

上构建移动应用程序，这也会在 stable 上运行

备注

在使用路径 URL 策略时，您需要确保在 web/index.html 的 <head> 部分中包含 <base href="/">。
这是在创建新的 Flutter 应用程序时 默认添加的 。

此外，当部署您的生产应用时，您需要确保每条路径 指向你的 index.html。如果您使用 Firebase 托管等工具，则在将您的应用程序配置为 单页应用程序.
时会自动为您完成此操作否则，您想了解如何为您正在使用的主机重写 index.html 的所有路径。

本质上，您想要一个单页应用程序，其中 HTTP 服务器为所有路径提供 index.html。

包实现基于使用 flutter_web_plugins 的手动解决方案。使用该包的好处如下：

只需要调用一个函数
无需使用条件导入（包会为您完成）。
您不会在 stable 上遇到任何遗漏的实施问题（因为网络功能仍在 beta 上）。

Answer 4

仅适用于 Github 个页面托管

这也适用于不是直接从 domain.com/ 而是从某些路径 domain.com/path/ 提供的应用程序。

您需要将您的 repo 名称添加到基本 href，否则您的网站将无法运行。

<base href="/REPO_NAME/">

Answer 5

将此添加到 pubspec.yaml

dependencies:
  flutter_web_plugins:
    sdk: flutter

在 main.dart 文件中将 cofigureApp 添加到应用程序的根目录并添加此导入

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void configureApp() {
  setUrlStrategy(PathUrlStrategy());
}

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  configureApp();
  runApp(MyApp());
}

重新启动网络应用程序

出来会是这样

http://localhost:52299/login_page

Answer 6

我发现上面的大部分答案有点令人困惑。在 Johannes Milke 的 YouTube tutorial 短短 4 分钟之后，我的 firebase-hosted 网站最终发挥作用。

本教程概述了解决“#”问题的多个选项，基本上更好地解释了上面的一些答案。我最终的解决方案是

添加 url_strategy 依赖项，如上面许多答案中所述。
在我的 index.html 文件
确保所有路径都指向 index.html 通过添加 "rewrites": [ { "source": "**", "destination": "/index.html" } ] 在我的firebase.json.

如何从 Flutter web 中的 URL 中删除哈希 (#)

How to remove hash (#) from URL in Flutter web

dart

flutter

flutter-web

使用`url_strategy`

备注

如何从 Flutter web 中的 URL 中删除哈希 (#)

How to remove hash (#) from URL in Flutter web

dart

flutter

flutter-web

使用url_strategy

备注

使用`url_strategy`