added new touterlinks to app.vue

src/App.vue

@@ -12,7 +12,9 @@ import HelloWorld from './components/HelloWorld.vue'
 
       <nav>
         <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
+        <RouterLink to="/push">Push</RouterLink>
+        <RouterLink to="/pull">Pull</RouterLink>
+        <RouterLink to="/legs">Legs</RouterLink>
       </nav>
     </div>
   </header>

src/components/WelcomeItem.vue

@@ -7,7 +7,9 @@
       <h3>
         <slot name="heading"></slot>
       </h3>
-      <slot></slot>
+      <slot>
+        <p></p>
+      </slot>
     </div>
   </div>
 </template>

src/router/index.js

@@ -10,12 +10,28 @@ const router = createRouter({
       component: HomeView
     },
     {
-      path: '/about',
+      path: '/push',
-      name: 'about',
+      name: 'push',
       // route level code-splitting
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue')
+      component: () => import('../views/PushView.vue')
+    },
+    {
+      path: '/pull',
+      name: 'pull',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/PushView.vue')
+    },
+    {
+      path: '/legs',
+      name: 'legs',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/PushView.vue')
     }
   ]
 })