[Feature Request] Name Views Support

[ThaDaVos]

Like the title says, it would be cool if we could use named views with this plugin like shown here:
https://router.vuejs.org/guide/essentials/named-views.html

This would open up so many more possibilities 😲

[ThaDaVos]

Worked arround it by using a little function to parse the routes I got - all routes started with an @ as child of a route will be mixed in as named views:

function parseRoutes(routes: Array<RouteConfig>) {
  return routes.map((route: RouteConfig) => {
    if ((route?.children?.length ?? 0) > 0) {
      const views = route?.children?.filter((child: RouteConfig) =>
        child.name?.startsWith("@")
      );

      route.children = parseRoutes(
        route.children?.filter(
          (child: RouteConfig) => !child.name?.startsWith("@")
        ) ?? []
      );

      if ((views?.length ?? 0) > 0) {
        const singleViewRoute = route as RouteConfigSingleView;
        const defaultComponent = singleViewRoute.component;
        const defaultProps = singleViewRoute.component;
        const multiViewRoute = route as RouteConfigMultipleViews;

        if (defaultComponent !== null && defaultComponent !== undefined) {
          const components: Dictionary<Component> = {
            default: defaultComponent,
          };

          views?.forEach((view: RouteConfig) => {
            const singleViewView = view as RouteConfigSingleView;
            if (
              singleViewView.component !== null &&
              singleViewView.component !== undefined
            ) {
              components[view.name?.substring(1) ?? view.path] =
                singleViewView.component;
            }
          });

          multiViewRoute.components = components;
        }

        if (defaultProps !== null && defaultProps !== undefined) {
          // eslint-disable-next-line @typescript-eslint/ban-types
          const props: Dictionary<boolean | Object | RoutePropsFunction> = {
            default: defaultProps,
          };

          views?.forEach((view: RouteConfig) => {
            const singleViewView = view as RouteConfigSingleView;
            if (
              singleViewView.props !== null &&
              singleViewView.props !== undefined
            ) {
              props[view.name?.substring(1) ?? view.path] =
                singleViewView.props;
            }
          });

          multiViewRoute.props = props;
        }

        return multiViewRoute;
      }
    }

    return route;
  });
}

[ktsn]

What is the use case for that with vue-route-generator?

[ThaDaVos]

When using vue-route-generator all routes are generated using vue-route-generator, I see no easy way of hooking into the generation (not even with route-meta unless it becomes scriptable to use the named views - why would one use it? There are cases for Admin/Management Panels to replace the sidebar with a specific sidebar of that page (to prevent really deep nesting) or other similar cases.

Simply said, you can think of enough use cased but there seems to be no supported way of setting named views from files - except reparsing the generated routes on every application startup (an option would be to have a callback in the loader itself, so after generation of the routes so one can change stuff)