GetX子页面导航异常：URL更新但页面未切换

问题说明 #

用GetX实现层级URL导航，从Page1跳转至Page2再到Page3，期望最终URL为example.com/page1/page2/page3，但实际操作后URL仅显示page1/page2，页面仍停留在Page1，调试控制台无报错。

问题根源 #

你在GetPage的children列表中给子页面配置了完整绝对路由路径（比如/page1/page2），但GetX的子路由需要使用相对父路由的路径，绝对路径会打乱路由匹配逻辑，导致无法正确加载目标页面。

修复步骤 #

1. 修正路由配置 #

将children中的子页面name改为相对路径，同时保留外层完整路由常量方便跳转调用：

class AppRoutes {
  static String page1 = '/page1';
  static String page2 = '/page1/page2';
  static String page3 = '/page1/page2/page3';

  static List<GetPage> returPages() {
    return [
      GetPage(
        name: page1,
        page: () => const Page1(),
        children: [
          // 子页面用相对父路由的路径：/page2
          GetPage(
            name: '/page2',
            page: () => const Page2(),
            children: [
              // 子页面用相对父路由的路径：/page3
              GetPage(
                name: '/page3',
                page: () => const Page3(),
              ),
            ],
          ),
        ],
      ),
    ];
  }
}

2. 跳转逻辑保持不变 #

跳转时直接使用定义好的完整路由常量即可，GetX会自动处理层级URL拼接：

// Page1中跳转至Page2
ElevatedButton(
  onPressed: () => Get.toNamed(AppRoutes.page2),
  child: const Text('Go to page 2'),
)

// Page2中跳转至Page3
ElevatedButton(
  onPressed: () => Get.toNamed(AppRoutes.page3),
  child: const Text('Go to page 3'),
)

3. 效果验证 #

修复后：

• 从Page1跳转到Page2，URL变为page1/page2，页面正常显示Page2
• 从Page2跳转到Page3，URL变为page1/page2/page3，页面正常显示Page3

内容的提问来源于stack exchange，提问作者Eric Mello Francischett