使用Getx实现Flutter Web无#路径传参与URL直接跳转ProductScreen

1. 配置PathUrlStrategy移除URL中的#符号 #

Flutter Web默认使用Hash路由模式，URL会自带#，你需要在main函数入口配置路径路由模式：

import 'package:flutter/foundation.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void main() {
  // 仅针对Web平台启用PathUrlStrategy
  if (kIsWeb) {
    setUrlStrategy(PathUrlStrategy());
  }
  runApp(const MyApp());
}

注意：部署到服务器时需要配置重定向规则，将所有路径请求都指向web/index.html，否则用户直接访问子路径会出现404错误，比如Nginx配置try_files $uri $uri/ /index.html;即可

2. 修正GetPage路由配置 #

你当前的GetPage命名规则错误，需要按照要求的URL格式配置带占位符的路由规则：

GetPage(
  // 两个可变参数用:开头定义占位符，末尾跟固定参数product
  name: '/:param1/:param2/product',
  page: () => ProductScreen(),
  binding: ProductScreenBinding(),
),

3. 修正初始页面的跳转逻辑 #

跳转的命名路由需要和你定义的路由格式保持一致：

GestureDetector(
  child: Container(
    //some content inside
  ),
  onTap: () {
      Get.toNamed(
          '/$variableParameter1/$variableParameter2/product',
      );
  },
)

4. 修正控制器获取参数的逻辑 #

GetX的路径参数不会存放在Get.arguments中，需要通过Get.parameters获取占位符对应的参数值：

class ProductController extends GetxController {
  var screenprm1 = Get.parameters['param1']?.obs ?? ''.obs;
  var screenprm2 = Get.parameters['param2']?.obs ?? ''.obs;
}

做完以上调整后即可满足全部需求：跳转后URL格式符合要求、无#符号、用户直接访问对应URL可正常进入ProductScreen页面并拿到两个可变参数。

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