Route parameters with useRoute in Vue - Mini Project: Build & Apply

Route parameters with useRoute

📖 Scenario: You are building a simple Vue 3 app that shows details for a product based on the product ID in the URL.

🎯 Goal: Create a Vue component that uses the useRoute function to read the id parameter from the URL and display it on the page.

📋 What You'll Learn

Create a Vue component using the <script setup> syntax

Import and use the useRoute function from vue-router

Access the id parameter from the route params

Display the id value inside the template

Use semantic HTML and ensure accessibility

💡 Why This Matters

🌍 Real World

Many web apps show details for items like products, users, or posts based on the URL. Using route parameters lets you build pages that change content dynamically without reloading.

💼 Career

Understanding how to use route parameters with <code>useRoute</code> is essential for frontend developers working with Vue Router to build dynamic, user-friendly single-page applications.

1

Set up the Vue component skeleton

Create a Vue component file with <template> and <script setup> tags. Inside the template, add a <section> with a heading <h1> that says "Product Details".

Vue

  
    Product Details
    
  



// Your code here

Need a hint?

Start by creating the basic structure of a Vue component with template and script setup tags.

2

Import useRoute and get route params

Inside the <script setup> tag, import useRoute from vue-router. Then create a constant called route and assign it the result of calling useRoute().

Vue

  
    Product Details
  



// Import useRoute and create route constant
// Your code here

Need a hint?

Use import { useRoute } from 'vue-router' and then call useRoute() to get the current route object.

3

Extract the id parameter from route params

Create a constant called productId and assign it the value of route.params.id.

Vue

  
    Product Details
  



import { useRoute } from 'vue-router'

const route = useRoute()

// Extract productId from route params
// Your code here

Need a hint?

Access the id property inside route.params and assign it to productId.

4

Display the productId in the template

Inside the <section> tag, below the heading, add a paragraph <p> that shows the text "Product ID: " followed by the value of productId using Vue's mustache syntax.

Vue

  
    Product Details
    
  



import { useRoute } from 'vue-router'

const route = useRoute()
const productId = route.params.id

Need a hint?

Use {{ productId }} inside a paragraph to show the product ID dynamically.