Fill a named view in an ancestor component?

[cadilhac]

With this hierarchy of routes A <- B <- C. Component assigned to route A has a named view in it.

When defining route C, it seems that a component can't be set to the named view defined in A. B could do it, but not C.

Moreover, if B sets a component for a named view in A, C can not override the component for the same view.

I am coming from angularjs/ui-router and such a thing was possible.

Any reason why? It would be very useful. Any workaround?

Repro is here

[posva]

I can't visualize what you mean. What is the code you are writing with Vue Router. Maybe an example of ui-router too?

[cadilhac]

It's a first step. Yes, that way, I can have the right component.
But I lost my props. In the route def, I have the props property set and it was working well when I was using router-view alone but not if now using a Component tag inside. And I tried this:

<router-view name="MyViewName" v-slot="{ Component, route }">
    <component :is="route.meta.components.MyViewName" v-bind="route.props" />
</router-view>

but route.props is empty. Instead of props, I tried route.meta.components.MyNameView.props, but its content is what is set in defineProps i.e. an array of the needed props names, like ['user', 'status'] if I have written in my component:

const props = defineProps(['user', 'status'])

i.e. it's like the array has not been replaced by the actual values.

[posva]

You will indeed have to pass the props manually, that's okay. You can rely on route.matched[0].props to do that or add the option to meta as well and build your custom solution.

Maybe you should start again and try to explain what you are trying to achieve. Chances are your a trying to map an existing solution from ui-router to vue-router and some things seem to not be compatible.

[cadilhac]

I was pretty sure you would say that ;) . So I already have some kind of custom solution. However, I still have a question.
Before, with router-view, the props property in the route definition was called when it was set to an arrow function. With your "component :is" solution (see my code just above), it's still called, but it's not used (not assigned to route.props that I receive in the router-view slot).

props: to => to.meta.props

or I don't know where to grab these props.

[posva]

If with route.props, you refer to the record you define, it’s in the route matched array but you can put it in meta instead of using the native props option

[cadilhac]

Thanks a lot. I think I have all the pieces to make a full custom solution.

[cadilhac]

I posted on github the plugin I wrote to enhance Vue Router (and to ease my life when porting an app from AngularJS/ui-router to Vue). It can be found here.

From the README:

With vue3-router-ex, you can enhance a route definition to:

1. Indicate which data you require. To validate a route, all data must first be loaded (usually asynchronously) and it can be done hierarchically (i.e. some data can depend on others, coming from the current or an ancestor route).
2. Redirect to another route if needed. You don't need to load all the data first, just the one you need to choose to redirect or not.
3. Implicitly define states by choosing which data subset to load according to a criterion (usually a first discriminating data) and which components to assign to named views (based on the data or another criterion like being on a mobile or not). These components can be placed anywhere higher in the hierarchy of routed components by using a custom router-view-ex directive which seamlessly replaces router-view.
4. Hook into the Vue Router guards.

vue3-router-ex also ensures that component props (the ones you get with defineProps) include:

1. The route parameters.
2. All the (often fetched) data (see resolves) set in the route definition.
3. Some variables that are not part of the route url (i.e. not in params or query). It uses windows.history.state to pass these variables.