Nested routes and child views in Vue - Mini Project: Build & Apply

Nested routes and child views

📖 Scenario: You are building a simple website with a main page and a user profile section. The profile section has two parts: Overview and Settings. You want to show these parts inside the profile page without leaving it, using nested routes and child views.

🎯 Goal: Create a Vue app with nested routes where the /profile route shows a profile layout and inside it, the /profile/overview and /profile/settings routes show their respective child views.

📋 What You'll Learn

Create a Vue router with nested routes for /profile and its children overview and settings

Create a ProfileLayout component that includes a <router-view> for child views

Create simple Overview and Settings components

Use router-link to navigate between overview and settings inside the profile page

💡 Why This Matters

🌍 Real World

Nested routes let you build complex pages with sections that change without leaving the main page, like user dashboards or settings panels.

💼 Career

Understanding nested routes is essential for building scalable Vue apps with clear navigation and reusable layouts.

1

Set up the main Vue router with a /profile route

Create a Vue router with a route for /profile that uses a component called ProfileLayout. Import createRouter and createWebHistory from 'vue-router'.

Vue

import { createRouter, createWebHistory } from 'vue-router'
// Your code here

Need a hint?

Remember to import ProfileLayout and set it as the component for the /profile route.

2

Add child routes overview and settings under /profile

Inside the /profile route, add a children array with two routes: one for overview using component Overview, and one for settings using component Settings. Import both components.

Vue

import Overview from './components/Overview.vue'
import Settings from './components/Settings.vue'
// Add children routes for overview and settings inside the /profile route

Need a hint?

Child routes do not start with a slash. Use path: 'overview' and path: 'settings'.

3

Create ProfileLayout component with a <router-view>

Create a Vue component called ProfileLayout.vue that has a heading <h2>User Profile</h2>, two router-link elements to /profile/overview and /profile/settings, and a <router-view> to show child views.

Vue

  



// No script needed for this step

Need a hint?

Use <router-link> for navigation and <router-view> to display child routes inside the layout.

4

Create simple Overview and Settings components

Create two Vue components: Overview.vue with a heading <h3>Profile Overview</h3> and Settings.vue with a heading <h3>Profile Settings</h3>. These will be the child views shown inside ProfileLayout.

Vue

  



// No script needed

Need a hint?

Each component should have a heading and some text inside a <div>.