docs: fix named views

diff --git a/docs/guide/essentials/named-views.md b/docs/guide/essentials/named-views.md
index ad4617ce8dabdf7d756875bfa80c5c7b255d5baf..87dd6f6a544cbc7d32ad6b348cc143aa99fd2bb9 100644 (file)
--- a/docs/guide/essentials/named-views.md
+++ b/docs/guide/essentials/named-views.md
@@ -3,9 +3,9 @@
 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.
 
 ```html
-<router-view class="view left-sidebar" name="left-sidebar"></router-view>
+<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
 <router-view class="view main-content"></router-view>
-<router-view class="view right-sidebar" name="right-sidebar"></router-view>
+<router-view class="view right-sidebar" name="RightSidebar"></router-view>
 ```
 
 A view is rendered by using a component, therefore multiple views require
@@ -20,8 +20,10 @@ const router = createRouter({
       path: '/',
       components: {
         default: Home,
-        a: LeftSidebar,
-        b: RightSidebar,
+        // short for LeftSidebar: LeftSidebar
+        LeftSidebar,
+        // they match the `name` attribute on `<router-view>`
+        RightSidebar,
       },
     },
   ],