Named Views | two router view
Sometimesyouneedtodisplaymultipleviewsatthesametimeinsteadofnestingthem,e.g.creatingalayoutwithasidebarviewandamainview.Thisiswherenamedviewscomeinhandy.Insteadofhavingonesingleoutletinyourview,youcanhavemultipleandgiveeachofthemaname.Arouter-viewwithoutanamewillbegivendefaultasitsname.template
Sometimes you need to display multiple views at the same time instead of nesting them, e.g. creating a layout with a sidebar view and a main view. This is where named views come in handy. Instead of having one single outlet in your view, you can have multiple and give each of them a name. A router-view without a name will be given default as its name.
template<router-view class="view left-sidebar" name="LeftSidebar" /> <router-view class="view main-content" /> <router-view class="view right-sidebar" name="RightSidebar" />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:
jsconst router = createRouter({ history: createWebHashHistory(), routes: [ { path: /, components: { default: Home, // short for LeftSidebar: LeftSidebar LeftSidebar, // they match the `name` attribute on `<router-view>`...