如何删除散列(#)从网址扑动网页

小开

如果您只关心路由，那么可以这样做:

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

小开

以下答案来自 Mouad Debbar 对 gitHub (见问题评论)的解释。

以下是一旦可用时使用它的步骤:

在 web/index.html文件的 <head>部分中添加 <base href="/">。这将自动添加到新项目创建的颤振创建。但对于现有的应用程序，开发人员需要手动添加它。在 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());
}

小开

最佳答案

你现在可以使用 简单的包裹和 < strong > 单行代码 来删除 Flutter web 应用程序中的前导散列(#) : < a href = “ https://pub.dev/package/url _ Strategy”rel = “ norefrer”> url_strategy (完全公开: 我就是作者)

使用 `url_strategy`

您只需添加依赖项正如这里所描述的，然后向 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上，如果你建立你的移动应用程序的 stable和只有网络上的 beta。

笔记

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

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

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

该软件包的实现基于使用 flutter_web_plugins的手动解决方案:

只需要调用单个函数。
不需要使用条件导入(包为您做到了这一点)。
在 stable上不会出现任何缺失的实现问题(因为 Web 特性仍然在 beta上)。

小开

只用于 Github 页面托管

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

您需要添加您的回购名称基地 href 否则您的网站将无法工作。

<base href="/REPO_NAME/">

小开

添加到 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

小开

我发现上面的大多数答案都有点令人困惑。在我的 Firebase 托管网站上工作的最后一件事是遵循 Johannes Milke 的这个短短的4分钟 YouTube 教程。

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

按照上面许多答案中的描述添加 url _ Strategy 依赖项。
在 index.html 文件的部分中添加 base href = “/”>
确保所有路径都指向 index.html，方法是在 firebase.json 中添加“ rewrite”: [{“ source”: “ * *”，“ target”: “/index.html”}]。

小开

在 pubspec.yaml < strong > url _ Strategy 中安装
用 main.dart 写:

import 'package:url_strategy/url_strategy.dart';


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

如果刷新页面时出现错误，则将文件 404. html添加到具有 index.html 的文件夹中。复制 index.html 的全部内容并将其粘贴到404.html 中。对于一些接待员来说，这已经足够了。但是一些主机也需要文件“ . htaccess”。
您应该在同一个文件夹中创建文件“ . htaccess”并将其写入该文件:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . /index.html [L]

这个解决方案是从这个视频收到的。

如何删除散列(#)从网址扑动网页

使用 url_strategy

笔记

使用 `url_strategy`