如何用GoRouter实现类似StackOverflow的可选路径参数路由？

问题分析 #

需要实现两种URL访问同一页面的效果：

• /creations/:creationId
• /creations/:creationId/:slug
  同时解决两个核心问题：

1. 无slug时弹窗提示创建永久链接，而非强制跳转虚拟slug
2. 使用同一路由名pushNamed时，传递slug参数不报错

解决方案 #

重构GoRouter路由定义，将slug设为可选参数，并在页面构建逻辑中处理slug为空的场景：

GoRoute(
  path: "${LeaderboardItemPage.route}/:creationId/:slug?",
  name: LeaderboardItemPage.route,
  builder: (BuildContext context, GoRouterState state) {
    final creationId = state.pathParameters['creationId'];
    final slug = state.pathParameters['slug'];

    // 校验资源ID合法性
    if (creationId == null) {
      return const ErrorWidget("无效的资源ID");
    }

    // 无slug时弹窗提示创建永久链接
    if (slug == null) {
      // 使用addPostFrameCallback避免页面构建时弹窗的上下文冲突
      WidgetsBinding.instance.addPostFrameCallback((_) {
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: const Text("提示"),
            content: const Text("请创建永久链接以生成友好URL"),
            actions: [
              TextButton(
                onPressed: () => Navigator.pop(context),
                child: const Text("取消"),
              ),
              TextButton(
                onPressed: () {
                  // 替换为实际的slug创建逻辑（比如自动生成或跳转编辑页）
                  Navigator.pop(context);
                  // 创建完成后跳转带slug的路由
                  context.pushNamed(
                    LeaderboardItemPage.route,
                    pathParameters: {
                      'creationId': creationId,
                      'slug': '自定义或生成的slug'
                    }
                  );
                },
                child: const Text("创建"),
              ),
            ],
          ),
        );
      });
    }

    return LeaderboardItemPage(
      creationId: creationId,
      slug: slug, // 按需将slug传递给页面使用
    );
  },
),

关键修改说明 #

1. 路由路径优化：:slug?表示该参数为可选，同时匹配带/不带slug的URL，且共享同一路由名
2. 移除强制redirect：不再强制跳转到虚拟的overview slug，改为动态判断处理
3. 参数传递兼容：路由定义包含slug可选参数后，pushNamed传递slug参数不会再报unknown param错误

测试代码 #

传递slug参数跳转：

context.pushNamed(
  LeaderboardItemPage.route,
  pathParameters: {
    'creationId': leaderboardItem.creationId,
    'slug': "some-slug"
  }
);

不带slug参数跳转（触发弹窗）：

context.pushNamed(
  LeaderboardItemPage.route,
  pathParameters: {
    'creationId': leaderboardItem.creationId,
  }
);

内容的提问来源于stack exchange，提问作者TSR