如何使用 onGenerateRoute 在 URL 中显示 Flutter Web 路由名称？

Posted 2023-02-23

【中文标题】如何使用 onGenerateRoute 在 URL 中显示 Flutter Web 路由名称？

【英文标题】：How to show Flutter Web route name in the URL with onGenerateRoute?

【发布时间】：2020-02-15 05:22:44

【问题描述】：

我在 MaterialApp 上使用 onGenerateRoute 参数进行路由。

MaterialApp(
  ...
  onGenerateRoute: Router.generateRoute,
  ...
)

然后使用pushNamed()。

我想在 url 中显示我的路线名称，但我无法通过 onGenerateRoute 实现。

如果我在 MaterialApp 中使用routes:，

像这样：

  MaterialApp(
    ...
    routes: sliverScreen: (context) => SliverScreen(),
    ...
  )

它有效。但是如果我在 MaterialApp 上提供了 onGenerateRoute，我认为这是多余的。

【参考方案1】：

您可以将name添加到生成的路由中，它会出现在URL中：

  MaterialPageRoute(
    builder: ... ,
    settings: RouteSettings(name: 'SOMENAME'))

【讨论】：

当我使用网络构建器（flutter run -d chrome 或flutter build web）时，我认为最好在“SOMENAME”前面加上一个斜杠。即：settings: RouteSettings(name: '/SOMENAME')) 使 url localhost:55525/#/SOMENAME 我不知道网络建设中的 # 是什么，但我没有质疑它。

@chongman 客户端路由模式有两种：hash based 和 history api based。第一个更健壮（但不那么美观）。我相信，在稳定的flutter for web 版本中，我们将能够选择其中之一。