Dynamic routes and parent/child relationships

[davidknapman-cl]

I want to be able to interrogate a router, based on a named route (rootRouteName). Every immediate child route of that named route should be turned into a TTab object, and we then iterate over those tab objects to create a tab control using our UI framework.

So in a composable, I have this definition, slightly simplified

  const allTabs = computed<TTab[]>(() => {
    const rootRoute = router.resolve({ name: rootRouteName });
    const children = rootRoute.matched[rootDepth.value].children;
    const childTabs = children.map(a => {
      const routeName = a.name as string;
      const tabText = a.meta?.title ?? "";
      return augmentTab({
        text: tabText,
        routeName,
      });
    });
    return childTabs;
  });

This has been working fine provided that the children are defined when the router is first created. But now we're wanting to have a variable number of tabs based on metadata we're retrieving via an API call. That logic is iterating over an array of items and calling

router.addRoute(rootRouteName, {
  path: entityTypeName,
  name: `Entity|${entityTypeName}`,
  component: () => import("./components/Details.vue"),
});

But this fails miserably. Even accounting for router not being reactive, even if we play a trick to force allTabs to be recomputed (e.g. toggling a boolean ref that allTabs reads from at the top), we find that children is still in its original state.

I've found a few suggestions that I shouldn't expect children to be updated - but is there some api that I'm missing to be able to ask "given this route name, what immediate child routes exist, taking into account dynamically added routes?"