Flutter Web中使用GoRouter实现无URL变更的嵌套路由导航

方案一：使用传统Navigator替代GoRouter路由跳转 #

放弃将ProcessViewerPage注册为GoRoute，直接在ProcessesListPage中通过原生Navigator进行页面跳转，这种方式不会触发URL变更：

// 在ProcessesListPage的交互事件中（比如按钮点击）
onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => const ProcessViewerPage(),
      settings: const RouteSettings(name: 'process'), // 可选，用于路由管理标识
    ),
  );
},

如果要保留你原来的SlideTransition转场效果，可改用PageRouteBuilder实现：

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const ProcessViewerPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) => SlideTransition(
      position: animation.drive(
        Tween<Offset>(
          begin: const Offset(1, 0),
          end: Offset.zero,
        ).chain(CurveTween(curve: Curves.easeInOut)),
      ),
      child: child,
    ),
  ),
);

这种方法完全绕开GoRouter的URL同步机制，URL会始终保持为http://localhost:8000/。

方案二：GoRouter下的无URL变更导航（不推荐） #

GoRouter的核心设计是URL与路由状态同步，强行规避URL更新会打破其设计逻辑。如果一定要基于GoRouter实现，可移除/process路由配置，通过ShellNavigator直接push页面：

// 在需要跳转的位置调用
onTap: () {
  Navigator.of(_shellNavigatorKey.currentContext!).push(
    MaterialPageRoute(builder: (_) => const ProcessViewerPage()),
  );
},

总结 #

最直接且合理的方案是方案一，因为GoRouter的定位是URL驱动的路由系统，若不需要URL同步，原生Navigator是更适配的选择，代码简洁且无额外状态同步问题。

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