You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm having unexpected behavior with nested named views where the named components are not all rendered. Also props are not being passed when using named views.
In the jsfiddle, links 3 and 4 do not behave as expected.
What is expected?
Props are passed when using named views. Components for named views should be displayed.
Link 3:
The top section should have content "Top - 5". The bottom section should display 5 on both rows.
Link 4
Both the top and bottom sections should display "5".
What is actually happening?
Props are not always passed to named components. Components for named views are not always displayed.
Link 3
The top section should render the Top component. The prop for the nested view's component should have prop passed.
Link 4
The prop from the route param should be passed to the named components.
I ran across this with a complex page layout. I have a toolbar at the top of my app (defined in the same component as the default ) and a number of routes that are nested 2-3 levels deep. I want to change the content of the toolbar based on the deepest level of route hierarchy.
I created a <router-view name="toolbar">, but I'm struggling to get content rendering and changing according to the deepest route.
The text was updated successfully, but these errors were encountered:
You have to provide an object to props to tell which components must receive props: #2499
I think it would be nice being able to also just pass true directly instead of creating an object
posva
changed the title
Nested named routes do not render all components or pass props
Allow passing props:true instead of passing an object for named views
Jan 2, 2019
Thank you! I confirmed that changing props to use an object allows the props to be passed correctly. I also found documentation for this under the props section.
I think it would also be helpful to add that documentation to the named view section. Would you accept a PR for this?
However, I still have a problem where I cannot get all named views rendered when using nested views. I distilled it into https://jsfiddle.net/0oLr4v1f/
Should I create a new PR for this?
Link 1 which uses a nested view does not display the named router-view top. However link 2 does show the desired component in the top router-view.
Version
3.0.2
Reproduction link
https://jsfiddle.net/efq2Lzom/
Steps to reproduce
I'm having unexpected behavior with nested named views where the named components are not all rendered. Also props are not being passed when using named views.
In the jsfiddle, links 3 and 4 do not behave as expected.
What is expected?
Props are passed when using named views. Components for named views should be displayed.
Link 3:
The top section should have content "Top - 5". The bottom section should display 5 on both rows.
Link 4
Both the top and bottom sections should display "5".
What is actually happening?
Props are not always passed to named components. Components for named views are not always displayed.
Link 3
The top section should render the Top component. The prop for the nested view's component should have prop passed.
Link 4
The prop from the route param should be passed to the named components.
I ran across this with a complex page layout. I have a toolbar at the top of my app (defined in the same component as the default ) and a number of routes that are nested 2-3 levels deep. I want to change the content of the toolbar based on the deepest level of route hierarchy.
I created a
<router-view name="toolbar">
, but I'm struggling to get content rendering and changing according to the deepest route.The text was updated successfully, but these errors were encountered: