+ +``` + +A view is rendered by using a component, therefore multiple views require +multiple components for the same route. Make sure to use the `components` (with +an **s**) option: + +```js +const router = createRouter({ + history: createWebHashHistory(), + routes: [ + { + path: '/', + components: { + default: Home, + // short for LeftSidebar: LeftSidebar + LeftSidebar, + // they match the `name` attribute on `` + RightSidebar, + }, + }, + ], +}) +``` + +A working demo of this example can be found [here](https://codesandbox.io/s/named-views-vue-router-4-examples-rd20l). + +## Nested Named Views + +It is possible to create complex layouts using named views with nested views. When doing so, you will also need to give nested `router-view` a name. Let's take a Settings panel example: + +``` +/settings/emails /settings/profile ++-----------------------------------+ +------------------------------+ +| UserSettings | | UserSettings | +| +-----+-------------------------+ | | +-----+--------------------+ | +| | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | | +| | +-------------------------+ | | | +--------------------+ | +| | | | | | | | UserProfilePreview | | +| +-----+-------------------------+ | | +-----+--------------------+ | ++-----------------------------------+ +------------------------------+ +``` + +- `Nav` is just a regular component +- `UserSettings` is the parent view component +- `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._ + +The `