使用GoRouter时无法调用父路由的Provider，如何访问父路由的Provider？

我完全懂你遇到的困扰——在GoRouter的嵌套路由里，子路由总是拿不到父路由Provider的实例，对吧？看你的代码，问题出在GoRouter默认的路由构建方式上：每个GoRoute的builder会创建独立的上下文，导致父路由/products里的ProductsViewmodel没有被包含在子路由/products/add的上下文祖先链中，所以调用context.watch<ProductsViewmodel>()才会报错。

下面给你几种实用的解决方案，按需选择：

推荐方案：用ShellRoute实现路由范围内的Provider共享 #

如果ProductsViewmodel只需要在/products及其子路由中可用，用ShellRoute是最规范的做法——它会为一组路由创建一个共享的"壳"，所有子路由都会被包裹在这个壳的Provider上下文里。

修改你的路由定义：

// 用ShellRoute代替原来的GoRoute作为父路由壳
final productsShellRoute = ShellRoute(
  builder: (context, state, child) {
    // child参数对应子路由的页面（/products 或 /products/add）
    return MultiProvider(
      providers: [productsViewmodel],
      child: child,
    );
  },
  routes: [
    // 定义/products路由
    GoRoute(
      path: '/products',
      builder: (context, state) => ProductsWidget(),
    ),
    // 定义/products/add路由
    GoRoute(
      path: '/products/add',
      builder: (context, state) {
        // 现在这里可以正常访问ProductsViewmodel了
        context.watch<ProductsViewmodel>();
        return MultiProvider(
          providers: [productsAddViewmodel],
          child: ProductsAddWidget(),
        );
      },
    ),
  ],
);

// 更新appRouter的路由配置
final GoRouter appRouter = GoRouter(
  initialLocation: '/products',
  routes: [
    productsShellRoute, // 替换原来的productsRoutes
  ],
  errorBuilder: (context, state) => Scaffold(
    appBar: AppBar(title: const Text('Error')),
    body: Center(
      child: Text('Page not found: ${state.error}'),
    ),
  ),
);

这样调整后，/products和/products/add的页面都会共享ShellRoute里的ProductsViewmodel，子路由就能正常访问父路由的Provider了。

备选方案：将Provider提升到根级 #

如果ProductsViewmodel需要在整个App的多个路由中使用，可以直接把它移到App根目录的MultiProvider里，这样所有路由都能访问：

修改MyApp的代码：

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

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        localBackendService,
        productsViewmodel, // 把ProductsViewmodel移到根级Provider
      ],
      child: MaterialApp.router(
        debugShowCheckedModeBanner: false,
        title: 'My App',
        routerConfig: appRouter,
      ),
    );
  }
}

然后去掉/products路由里的MultiProvider：

final productsRoutes = GoRoute(
  path: '/products',
  builder: (context, state) {
    return ProductsWidget(); // 无需再包裹MultiProvider
  },
  routes: [
    GoRoute(
      path: 'add',
      builder: (context, state) {
        context.watch<ProductsViewmodel>();
        return MultiProvider(
          providers: [productsAddViewmodel],
          child: ProductsAddWidget(),
        );
      },
    )
  ],
);

补充：在ProductsAddViewmodel中访问ProductsViewmodel #

如果你的ProductsAddViewmodel需要调用ProductsViewmodel的方法（比如添加产品后刷新列表），可以在ProductsAddViewmodel里通过Provider获取父级实例：

class ProductsAddViewmodel extends ChangeNotifier {
  // ...现有代码

  Future<void> onInit() async {
    // 获取ProductsViewmodel实例（listen: false避免不必要的重建）
    final productsVm = Provider.of<ProductsViewmodel>(context, listen: false);
    // 后续可以调用productsVm的方法，比如productsVm.refreshData()
  }

  Future<void> saveForm() async {
    // 保存产品逻辑...
    // 保存成功后，返回结果给父路由
    if (context.mounted) {
      context.pop(true); // 传递true给父路由的push回调
    }
  }
}

内容来源于stack exchange