-
-
Notifications
You must be signed in to change notification settings - Fork 5k
docs: add example of nested named routes #1931
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -27,3 +27,58 @@ const router = new VueRouter({ | |
``` | ||
|
||
A working demo of this example can be found [here](https://jsfiddle.net/posva/6du90epg/). | ||
|
||
## Nested Named Views | ||
|
||
While being quite complex, it is possible to combine named views with nested view. When doing so, you will also need to name nested `router-view` components used. Let's take a Settings panel example: | ||
|
||
``` | ||
/settings/emails /settings/profile | ||
+-----------------------------------+ +------------------------------+ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We should put some image instead. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's keep this for the moment. An Image would be indeed better |
||
| UserSettings | | UserSettings | | ||
| +-----+-------------------------+ | | +-----+--------------------+ | | ||
| | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | | | ||
| | +-------------------------+ | | | +--------------------+ | | ||
| | | | | | | | UserProfilePreview | | | ||
| +-----+-------------------------+ | | +-----+--------------------+ | | ||
+-----------------------------------+ +------------------------------+ | ||
``` | ||
|
||
- `Nav` is just a regular compnonent | ||
- `UserSettings` is the view comopnent | ||
- `UserEmailsSubscriptions`, `UserProfile`, `UserProfilePreview` are nested view components | ||
|
||
**Note**: _Let's forget about how the HTML/CSS should look like to represent such layout and focus on the components used_ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Re-wording.The There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I added this just below |
||
|
||
```html | ||
<!-- UserSettings.vue --> | ||
<div> | ||
<h1>User Settings</h1> | ||
<NavBar/> | ||
<router-view/> | ||
<router-view name="helper"/> | ||
</div> | ||
``` | ||
|
||
_The nested view components are omitted here but you can find the full example at the end in the jsfiddle_ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It's unfortunate that the jsfiddle link is at the end. Reader may ask "what jsfiddle?" here. |
||
|
||
Then you can achieve the layout above with this route configuration: | ||
|
||
```js | ||
{ path: '/settings', | ||
// You could also have named views at the top | ||
component: UserSettings, | ||
children: [{ | ||
path: 'emails', | ||
component: UserEmailsSubscriptions | ||
}, { | ||
path: 'profile', | ||
components: { | ||
default: UserProfile, | ||
helper: UserProfilePreview | ||
} | ||
}] | ||
} | ||
``` | ||
|
||
A working demo of this example can be found [here](https://jsfiddle.net/posva/22wgksa3/). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Re-wording.
It is possible to create complex layouts using named views with nested views. For example, let us see following example; a settings panel.