flutter web：go router 未将路径参数打印在地址栏上

Question

我在 Flutter 网络上使用 go router。我想将 id 传递到其他页面，并在地址栏上显示此地址：

GoRoute(
  path: "/main_category/:id",
  name: "mainCategory",
  builder: (context, state) {
    return MainCategoryScreen(
      mainCategoryId: state.pathParameters["id"]!,
    );
  },
),

我正在这样使用：

InkWell(
  onTap: () {
    context.pushNamed("mainCategory",
      pathParameters: {"id": e.uuid!});
     },

这是我的小部件：

class MainCategoryScreen extends StatelessWidget {
  const MainCategoryScreen({super.key, required this.mainCategoryId});

  final String mainCategoryId;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Consumer(
        builder: (context, ref, child) {
          return Center(
            child: Text(mainCategoryId),
          );
        },
      ),
    );
  }
}

中心印有id，但浏览器地址栏中未添加此地址，请问是什么问题？

我正在使用最新版本的 flutter SDK 和 go router 。

我的主要飞镖：

 MaterialApp.router(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        routerConfig: router,
      ),

日志显示：

[GoRouter] pushing /main_category/4619e96f-14ea-4a12-a0b0-e83f79e97f73

Answer 1

在您的

GoRoute

定义中，路径定义为

/main_category/:id

，其中

:id

是

a path parameter

您可以通过编辑来解决问题：

InkWell(
  onTap: () {
    context.pushNamed("mainCategory/${e.uuid}",);
     },)

或者 使用

query parameters

如下：

GoRoute(
  path: "/main_category",
  name: "mainCategory",
  builder: (context, state) {
    return MainCategoryScreen(
   mainCategoryId: state.queryParameters["id"]!,//if id integer convert it 
    );
  },
),


InkWell(
  onTap: () {
    context.pushNamed("mainCategory",
      queryParamters: {"id": e.uuid!});

 //or  context.pushNamed("mainCategory?id=${e.uuid}");

     },

 path parameters

和

query parameters

之间有区别

1. 路径参数是URL路径的一部分，用于指定URL结构中的特定资源。

   例如：https://example.com/users/123

2. 查询参数附加在 URL 末尾，后跟一个问号。 例如：https://example.com/search?q=flutter

了解更多