Flutter Web URL 导航，如 http://localhost:60117/ItemDetails?pId=1 不起作用答案

【问题标题】：Flutter web URL navigation like http://localhost:60117/ItemDetails?pId=1 not workingFlutter Web URL 导航，如 http://localhost:60117/ItemDetails?pId=1 不起作用
【发布时间】：2021-10-10 17:38:58
【问题描述】：

在我的颤振项目中，我必须共享一个 URL，该 URL 通过社交媒体直接重定向到特定的产品详细信息页面。所以我使用velocity_x添加了路由信息，我的main.dart页面如下

 @override
Widget build(BuildContext context) {
return MaterialApp.router(
  
  debugShowCheckedModeBanner: false,
  title: 'AppName',
  theme: ThemeData(
      primaryColor: MyAppTheme.primaryColor,
      accentColor:MyAppTheme.accentColor
  ),
routeInformationParser: VxInformationParser(),
routerDelegate: VxNavigator(routes: {

  "/": (_,__)=> MaterialPage(child:SplashScreen()),
  "/login": (_,__)=> MaterialPage(child:SignUp()),
  "/home": (_,__)=> MaterialPage(child:Home(selectedIndex: 0)),
  "/ItemDetails": (uri, _){
    final pId=int.parse(uri.queryParameters["pId"]);     
    return MaterialPage(
      child:ItemDetailsFromAdd(
        pId:pId.toString() ,
      
    ));
  },
  
}),
)

我的初始路线是闪屏，在检查身份验证后，它会重定向到登录页面或主页。当我单击特定项目时，会创建一个 URL“http://localhost:60117/ItemDetails?pId=1”。但是当我尝试从另一个选项卡启动此 url 时，首先它会加载产品详细信息页面并突然重定向到我的初始页面启动画面。

我尝试将“/”初始路由从“/”更改为“/splash”并更改了我的“<base href="/splash/">”，但它最初给出了一个找不到页面的错误。

我怎样才能以正确的方式使用这个“http://localhost:60117/ItemDetails?pId=1” URL 直接访问我的产品详细信息页面。

【问题讨论】：

标签： flutter flutter-web flutter-navigation

【解决方案1】：

onGenerateRoute: (settings) {
      List<String> pathComponents = settings.name.split('/');
      if (pathComponents[1] == 'invoice') {
        return MaterialPageRoute(
          builder: (context) {
            return Invoice(arguments: pathComponents.last);
          },
        );
      } else
        return MaterialPageRoute(
          builder: (context) {
            return LandingPage();
          },
        );
      ;
    },

试试这个方法

【讨论】：

我正在使用 velocity_x 来路由。如何使用此代码添加此 onGenerateRoute？

【解决方案2】：

尝试在 URL 中添加主题标签 #：

http://localhost:60117/#/ItemDetails?pId=1

如果您正在运行渐进式网络应用程序，这是共享它的唯一方法。 /#/ 的左边是告诉浏览器从哪里获取应用程序，后面是路由器逻辑。如果您尝试删除/#/，应用程序将无法正常运行并恢复为默认路由。

【讨论】：

这种格式可以通过社交媒体分享吗？因为把 # 在社交媒体中以另一种方式使用
如果您正在运行渐进式网络应用程序，这是共享它的唯一方式。 /#/ 的左边是告诉浏览器从哪里获取应用程序，后面是路由器逻辑。如果您尝试删除/#/，应用程序将无法正常运行并恢复为默认路由。
我认为他已经做了一些事情来删除#，比如使用url_strategy
@Huthaifa Muayyad 我通过删除“setUrlStrategy(PathUrlStrategy());”添加了#但同样存在同样的问题。它重定向到初始路线
如果你有一个 webapp 可以工作，你需要在你的 URL 中有 /#/。这是假设您正确配置了路由和解析。

【解决方案3】：

经过长时间的测试，我找到了答案，这里我的初始路线（'/'）重定向到'SplashScreen'。因此，当我尝试使用 URL 首先访问特定项目时，它会出现 SplashScreen，并且我根据用户身份验证进行编码以重定向到主页或登录。因此，当我使用 url 访问特定项目时，它会重定向到我的登录名/主页。解决方案是我将初始路由更改为主页。

【讨论】：