0Pricing
Vue Academy · Lesson

Nested and Dynamic Routes

Build nested layouts and dynamic route parameters.

Nested and Dynamic Routes is a free Vue Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Beyond Static Routes

Real apps need routes that carry data and nest within layouts.

  • Dynamic segments capture values like an id
  • Nested routes render children inside a parent
  • Named routes and programmatic navigation add flexibility

Dynamic Route Segments

A colon defines a dynamic segment that matches any value.

const routes = [
  { path: "/user/:id", component: UserProfile }
]

// Matches /user/1, /user/42, /user/abc

Accessing route.params

Read the captured value through route.params.

<script setup>
import { useRoute } from "vue-router"

const route = useRoute()
console.log(route.params.id)
</script>

Reacting to Param Changes

When only the param changes (e.g. /user/1 to /user/2), the component is reused. Watch the param to reload data.

import { watch } from "vue"
import { useRoute } from "vue-router"

const route = useRoute()
watch(() => route.params.id, (newId) => {
  loadUser(newId)
})

Multiple Dynamic Segments

Routes can have several dynamic parts.

const routes = [
  { path: "/user/:userId/post/:postId", component: Post }
]

// route.params.userId and route.params.postId

Nested Routes

Nested routes let child routes render inside a parent component.

const routes = [
  {
    path: "/user/:id",
    component: UserLayout,
    children: [
      { path: "profile", component: Profile },
      { path: "posts", component: Posts }
    ]
  }
]

Nested router-view

The parent component needs its own router-view for children to render in.

<!-- UserLayout.vue -->
<template>
  <h1>User</h1>
  <router-view></router-view>
</template>

<!-- /user/1/profile renders Profile here -->

Named Routes

Give a route a name to refer to it without hardcoding the path.

const routes = [
  {
    path: "/user/:id",
    name: "user",
    component: UserProfile
  }
]

Linking by Name

router-link can target a named route and pass params as an object.

<router-link
  :to="{ name: 'user', params: { id: 42 } }"
>
  View User
</router-link>

Programmatic Navigation

Navigate from JavaScript with the router push method.

import { useRouter } from "vue-router"

const router = useRouter()

function goToUser(id) {
  router.push({ name: "user", params: { id } })
}

Other Navigation Methods

The router offers more navigation helpers:

  • router.push add a new history entry
  • router.replace navigate without a new history entry
  • router.back go to the previous page

Quick Check

Test your understanding of dynamic and nested routes.

Recap: Nested and Dynamic Routes

You learned advanced routing:

  • Dynamic segments (/user/:id) captured in route.params
  • Nested routes via children plus a nested router-view
  • Named routes let you link by name
  • router.push navigates programmatically

Next: navigation guards.

Frequently asked questions

Is the “Nested and Dynamic Routes” lesson free?

Yes — the full text of “Nested and Dynamic Routes” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Nested and Dynamic Routes”?

Build nested layouts and dynamic route parameters. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Nested and Dynamic Routes” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Setting Up Vue Router
  2. Nested and Dynamic Routes
  3. Navigation Guards
← Back to Vue Academy