Nested routes and child views in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a nested route in Vue Router.

Vue

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      { path: '[1]', component: ChildComponent }
    ]
  }
];

Drag options to blanks, or click blank then click option'

A/child

Bchild-route

Cchildren

Dchild

Attempts:

3 left

💡 Hint

Common Mistakes

Using a leading slash in the child route path causes it to be treated as a root path.

The child route path should be relative without a leading slash, so 'child' is correct.

2fill in blank

medium

Complete the code to display child views inside the parent component.

Vue

<template>
  <div>
    <h1>Parent</h1>
    [1]
  </div>
</template>

Drag options to blanks, or click blank then click option'

A<view-router></view-router>

B<router-view></router-view>

C<child-view></child-view>

D<router-child></router-child>

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect component names like or .

In Vue Router, is used to display child routes inside a parent component.

3fill in blank

hard

Fix the error in the nested route path to correctly match the child route.

Vue

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: '[1]', component: Stats }
    ]
  }
];

Drag options to blanks, or click blank then click option'

Astats

B/stats

C/dashboard/stats

Ddashboard/stats

Attempts:

3 left

💡 Hint

Common Mistakes

Using absolute paths for child routes causes routing errors.

Child route paths should be relative without a leading slash, so 'stats' is correct.

4fill in blank

hard

Complete the code to create a nested route with a default child view.

Vue

const routes = [
  {
    path: '/account',
    component: Account,
    children: [
      { path: '', component: Profile },
      { path: '[1]', component: Settings }
    ]
  }
];

Drag options to blanks, or click blank then click option'

Bprofile

Csettings

D/settings

Attempts:

3 left

💡 Hint

Common Mistakes

Using '/' or '/settings' as child paths instead of relative paths.

An empty string path ('') defines the default child route, and 'settings' is the path for the other child.

5fill in blank

hard

Fill all three blanks to define nested routes and display child views inside the parent component.

Vue

<template>
  <div>
    <h2>Dashboard</h2>
    [1]
  </div>
</template>

<script setup>
import { createRouter, createWebHistory } from 'vue-router';
import Dashboard from './Dashboard.vue';
import Overview from './Overview.vue';
import Reports from './Reports.vue';

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: '[2]', component: Overview },
      { path: '[3]', component: Reports }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});
</script>

Drag options to blanks, or click blank then click option'

A<router-view></router-view>

Creports

Doverview

Attempts:

3 left

💡 Hint

Common Mistakes

Using absolute paths for child routes or missing <router-view> in the parent.

The parent component uses <router-view> to show child views. Child paths are relative: 'overview' and 'reports'.

Practice

1. What is the main purpose of nested routes in Vue Router?

easy

A. To load multiple Vue apps on the same page

B. To display child views inside a parent view using <router-view />

C. To create routes without components

D. To disable navigation guards

Solution

1. Step 1: Understand nested routes concept

   Nested routes allow smaller views (child views) to be shown inside bigger views (parent views).

2. Step 2: Identify how child views are displayed

   Child views appear inside the parent component where <router-view /> is placed.

3. Final Answer:

   To display child views inside a parent view using <router-view /> -> Option B

4. Quick Check:

   Nested routes = child views inside parent with <router-view /> [OK]

Hint: Nested routes show child views inside parents with [OK]

Common Mistakes:

• Thinking nested routes load separate apps
• Believing nested routes don't need
• Confusing nested routes with route guards

2. Which of the following is the correct way to define a child route inside a parent route in Vue Router?

easy

A. { path: '/parent', component: Parent, children: [{ path: 'child', component: Child }] }

B. { path: '/parent/child', component: Child }

C. { path: '/parent', component: Parent, child: [{ path: 'child', component: Child }] }

D. { path: '/parent', component: Parent, children: { path: 'child', component: Child } }

Solution

1. Step 1: Recall Vue Router child route syntax

   Child routes go inside a children array property of the parent route object.

2. Step 2: Check each option's structure

   { path: '/parent', component: Parent, children: [{ path: 'child', component: Child }] } correctly uses children: [{ path: 'child', component: Child }]. Options C and D use wrong keys or types. { path: '/parent/child', component: Child } defines a separate route, not nested.

3. Final Answer:

   { path: '/parent', component: Parent, children: [{ path: 'child', component: Child }] } -> Option A

4. Quick Check:

   Child routes = inside children array [OK]

Hint: Child routes go inside a children array in parent route [OK]

Common Mistakes:

• Using 'child' instead of 'children' key
• Defining child routes outside parent route
• Using object instead of array for children

3. Given this route config and components, what will be rendered when navigating to /dashboard/settings?

const routes = [
  { path: '/dashboard', component: Dashboard, children: [
    { path: 'settings', component: Settings }
  ]}
];

// Dashboard.vue template:
// 
Dashboard

// Settings.vue template:
// 
Settings Page

medium

A. Nothing renders due to missing

B. Settings Page

C. DashboardSettings Page

D. Dashboard

Solution

1. Step 1: Understand nested route rendering

   When visiting '/dashboard/settings', Vue renders Dashboard component first, then inside its <router-view /> renders Settings component.

2. Step 2: Combine rendered HTML from both components

   Dashboard shows <h1>Dashboard</h1> and Settings shows <h2>Settings Page</h2>. Both appear together.

3. Final Answer:

   <h1>Dashboard</h1><h2>Settings Page</h2> -> Option C

4. Quick Check:

   Nested route renders parent + child views [OK]

Hint: Nested routes render parent plus child inside [OK]

Common Mistakes:

• Expecting only child component to render
• Forgetting in parent
• Confusing full path with child path

4. What is wrong with this route configuration if child views do not appear?

const routes = [
  { path: '/profile', component: Profile, children: [
    { path: 'edit', component: EditProfile }
  ]}
];

// Profile.vue template:
// 
Profile Page

medium

A. Profile.vue is missing to display child routes

B. Child route path should start with '/'

C. Children array should be outside the parent route object

D. EditProfile component must be imported inside Profile.vue

Solution

1. Step 1: Check how child routes display

   Child routes render inside the parent's <router-view />. Without it, child views won't show.

2. Step 2: Inspect Profile.vue template

   Profile.vue only has <h1>Profile Page</h1> and no <router-view />, so child routes can't render.

3. Final Answer:

   Profile.vue is missing <router-view /> to display child routes -> Option A

4. Quick Check:

   Missing <router-view /> = no child views [OK]

Hint: Parent needs to show child routes [OK]

Common Mistakes:

• Adding '/' at start of child path incorrectly
• Placing children outside parent route object
• Assuming child component imports affect rendering

5. You want to create a nested route where /shop shows a Shop component and /shop/products shows a Products component inside Shop. Which setup correctly achieves this and ensures accessibility and responsiveness? A) Define routes with children array, use <router-view /> in Shop, and add ARIA roles and responsive CSS. B) Define separate routes for /shop and /shop/products without nesting, and use CSS media queries only. C) Use nested routes but omit <router-view /> in Shop and rely on v-if to show Products. D) Use nested routes with children but place <router-view /> outside Shop component.

hard

A. Use nested routes but place outside Shop component

B. Define separate routes without nesting and use only CSS media queries

C. Use nested routes but omit in Shop and use v-if for Products

D. Define routes with children array, use in Shop, add ARIA roles and responsive CSS

Solution

1. Step 1: Setup nested routes properly

   Use a children array in the /shop route to define /shop/products as a child route.

2. Step 2: Ensure Shop component includes <router-view />

   This allows Products component to render inside Shop when navigating to /shop/products.

3. Step 3: Add accessibility and responsiveness

   Use ARIA roles for landmarks and semantic HTML, plus responsive CSS (like Flexbox or Grid) to adapt layout on different screens.

4. Final Answer:

   Define routes with children array, use <router-view /> in Shop, add ARIA roles and responsive CSS -> Option D

5. Quick Check:

   Nested routes + router-view + accessibility + responsive CSS = Define routes with children array, use in Shop, add ARIA roles and responsive CSS [OK]

Hint: Nested routes need router-view in parent plus ARIA and responsive CSS [OK]

Common Mistakes:

• Omitting router-view in parent component
• Not adding ARIA roles for accessibility
• Ignoring responsive design in CSS
• Placing router-view outside parent component