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

2024-05-08

Flutter Web 项目的默认 URL 定义了包含主题标签的 URL (#), 如下:

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

我想删除这个“#”,如下所示:

http://localhost:41521/peaple/

我怎么解决这个问题?


您现在可以使用简单的封装 and a 单行代码从 Flutter Web 应用程序中删除前导哈希值 (#):url_strategy https://pub.dev/packages/url_strategy(全面披露:我是作者)

Using url_strategy https://github.com/simpleclub/url_strategy

您只需添加依赖项如此处所述 https://pub.dev/packages/url_strategy/install然后将以下函数调用添加到您的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());
}

Calling setPathUrlStrategy这就是您需要做的一切????


该包还确保运行代码不会在移动设备上崩溃(见下文)。此外,这也将运行在stable如果您构建移动应用程序stable并且仅在网络上beta.

Notes

您需要确保包括<base href="/">在 - 的里面<head>你的部分web/index.html当使用路径URL策略时。
这是添加的默认情况下创建新的 Flutter 应用程序时。

此外,当部署 your 生产应用程序,你需要确保每条路指向你的index.html。如果您使用 Firebase 托管等工具,则在将应用程序配置为单页应用程序.
否则,您想查找如何重写您的所有路径index.html对于您正在使用的托管。

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


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

  • 只需要调用单个函数。
  • 无需使用条件导入(该包会为您完成此操作)。
  • 您不会遇到任何缺失的实施问题stable(因为网络功能仍然开启beta).
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何从 Flutter Web 中的 URL 中删除哈希 (#) 的相关文章