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

【问题标题】：如何从 Flutter web 中的 URL 中删除哈希 (#)
【发布时间】：2020-05-09 05:47:09
【问题描述】：

Flutter web 项目的默认 URL 定义了一个包含标签 (#) 的 URL，如下所示：

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

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

http://localhost:41521/peaple/

我该如何解决这个问题？

【问题讨论】：

相关问题Flutter_web navigation should provide a way to remove hash symbol(#)

标签： flutter dart flutter-web

【解决方案1】：

在 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

【讨论】：

【解决方案2】：

仅适用于 Github 页面托管

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

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

<base href="/REPO_NAME/">

【讨论】：

【解决方案3】：

您现在可以使用简单包和单行代码从 Flutter Web 应用程序中删除前导哈希 (#) ：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 上构建Web，这也将在stable 上运行。

注意事项

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

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

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

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

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

【讨论】：

您可以通过将 thnis 添加到 firebase.json 中的“hosting”字段来将所有路径重定向到 index.html：“rewrites”：[ {“source”：“**”，“目的地": "/index.html" } ]
默认情况下，Flutter 使用哈希 (/#/) 定位策略。哈希有什么好处？
@cretivecreatormaybenot 我正在使用 url_strategy，当我输入新的 url 时，应用程序会重新启动，而不是仅仅解析它并更新显示的页面。正常吗？为了测试它，我使用了这个 Navigator 2.0 示例：github.com/carloshwa/flutter-example/tree/navigator_2 非常感谢

【解决方案4】：

以下答案复制自 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());
}

【讨论】：

目前在主频道或稳定频道上均不可用。但它已经过测试，可以在开发和测试渠道上运行。
这应该是一个真正的社区维基，因为它只是一个复制的答案。
我现在用更简单的解决方案写了一个答案：stackoverflow.com/a/65709246/6509751
如果基本 href 是 /app/ 之类的其他东西，这是否有效？
flutter.dev/docs/development/ui/navigation/…

【解决方案5】：

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

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

【讨论】：

在哪里写这个？
@NehalJaisalmeria 在您的MaterialApp() 小部件中

使用url_strategy

注意事项

使用`url_strategy`