Flutter GetX仪表盘动态页面切换与嵌套路由问题求助

核心问题 #

你使用Get.toNamed('/dashboard/home')时，是将新页面推入全局路由栈，导致整个Dashboard页面被替换，而非仅在右侧内容区的子路由容器中切换页面。

修复步骤 #

1. 修正子路由出口的初始路由 #

将GetRouterOutlet的initialRoute改为相对父路由/dashboard的路径：

Expanded(
  child: GetRouterOutlet(
    initialRoute: '/home', // 替换原有的'/dashboard/home'
  ),
)

2. 修改导航方式为替换子路由 #

使用Get.offNamed()配合相对路径，仅替换子路由容器中的当前页面，避免全局路由栈切换：

class NavigationSidebar extends StatelessWidget {
  const NavigationSidebar({super.key});

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          ListTile(
            title: const Text('Home'),
            onTap: () {
              Get.offNamed('/home'); // 相对路径，仅更新右侧内容区
            },
          ),
          ListTile(
            title: const Text('Accounts'),
            onTap: () {
              Get.offNamed('/accounts');
            },
          ),
          ListTile(
            title: const Text('Profile'),
            onTap: () {
              Get.offNamed('/profile');
            },
          ),
        ],
      ),
    );
  }
}

额外说明 #

• 如果需要保留子路由的历史栈（比如从/accounts跳转到/accounts/customers后可返回），可以继续使用Get.toNamed()，但同样要用相对路径（如Get.toNamed('/customers')）。
• 你的GetPage嵌套结构配置正确，/dashboard的children已包含所有子路由，无需调整。

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