Nested routes and child views in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be rendered by this nested route setup?

Given the Vue Router configuration below, what will the user see when navigating to /dashboard/settings?

Vue

const routes = [
  {
    path: '/dashboard',
    component: DashboardLayout,
    children: [
      { path: '', component: DashboardHome },
      { path: 'settings', component: DashboardSettings }
    ]
  }
];

A Only the DashboardSettings component content is shown.

B Only DashboardLayout content is shown, no child components render.

C DashboardLayout wraps DashboardSettings content, showing both layouts and settings content.

D DashboardHome content is shown instead of DashboardSettings.

💡 Hint

Think about how parent and child components render together in nested routes.

In Vue Router, the parent component (DashboardLayout) renders and inside it the child route component (DashboardSettings) is displayed where <router-view> is placed. So both appear.

📝 Syntax

intermediate

Identify the syntax error in this nested route definition

Which option contains the correct syntax for defining nested routes in Vue Router?

Vue

const routes = [
  {
    path: '/profile',
    component: ProfileLayout,
    children: [
      { path: 'info', component: ProfileInfo },
      { path: 'settings', component: ProfileSettings }
    ]
  }
];

A children: { path: 'info', component: ProfileInfo }

B children: [ { path: 'info', component: ProfileInfo } ]

C children: [ { path: '/info', component: ProfileInfo } ]

D children: [ { path: '', component: ProfileInfo } ]

💡 Hint

Remember child paths should be relative, not absolute.

Child routes must have relative paths without a leading slash. Option B correctly uses 'info' as the path.

❓ state_output

advanced

What is the rendered output when navigating to a nested route with multiple ?

Consider a parent route with two nested child routes rendered in separate <router-view> elements. What will be displayed when navigating to /app/dashboard/overview?

Vue

const routes = [
  {
    path: '/app',
    component: AppLayout,
    children: [
      {
        path: 'dashboard',
        components: {
          default: DashboardMain,
          sidebar: DashboardSidebar
        },
        children: [
          { path: 'overview', component: DashboardOverview }
        ]
      }
    ]
  }
];

A AppLayout renders DashboardMain and DashboardSidebar, and DashboardOverview replaces DashboardMain.

B DashboardSidebar is not rendered because it is not a child route.

C Only DashboardOverview is rendered, others are replaced.

D AppLayout renders DashboardMain and DashboardSidebar, and DashboardOverview renders inside DashboardMain's <router-view>.

💡 Hint

Think about named views and nested child routes inside components.

Named views render DashboardMain and DashboardSidebar inside AppLayout. DashboardOverview renders inside DashboardMain's because it is a child route of dashboard.

🔧 Debug

advanced

Why does the child route component not render inside the parent?

Given this route setup, the child component ChildView does not appear when navigating to /parent/child. What is the most likely cause?

Vue

const routes = [
  {
    path: '/parent',
    component: ParentView,
    children: [
      { path: 'child', component: ChildView }
    ]
  }
];

// ParentView.vue template:
// <template><div>Parent Content</div></template>

A ParentView component is missing a <router-view> to display child routes.

B ChildView path should start with a slash '/child' to render correctly.

C The routes array must be flat; nested children are not supported.

D ChildView component must be imported inside ParentView component.

💡 Hint

Check how child routes render inside parent components.

For child routes to render, the parent component must include a element where the child component will appear.

🧠 Conceptual

expert

How does Vue Router handle nested route matching order?

When multiple nested routes match a URL, how does Vue Router decide which components to render?

A Vue Router renders all matched nested routes from parent to deepest child in order.

B Vue Router renders only the deepest matched child route component, ignoring parents.

C Vue Router renders only the first matched route at the top level, ignoring children.

D Vue Router randomly picks one matched route component to render.

💡 Hint

Think about how nested routes build up the page layout.

Vue Router renders matched routes hierarchically: parent components render first, then child components inside their , building the full nested UI.