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'.