How do you declare a dynamic route?

VueJunior~1 min read

A dynamic route is a route where part of the path is a variable (a parameter). It lets you create pages like:

/users/10
/products/42
/posts/my-article

In Vue Router, a dynamic route is declared using a colon (:) before the parameter name.

Example of declaring a dynamic route

const routes = [
  {
    path: '/users/:id',
    component: UserPage
  }
]

Now the path /users/5 or /users/1234, both match this route.

In the Composition API:

import { useRoute } from 'vue-router'

const route = useRoute()

console.log(route.params.id)

In the Options API:

this.$route.params.id

const routes = [
  {
    path: '/product/:productId',
    name: 'product',
    component: ProductPage
  }
]

vue

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

const route = useRoute()

console.log(route.params.productId)
</script>

{
  path: '/users/:userId/posts/:postId',
  component: PostPage
}

{
  path: '/search/:query?',
  component: SearchPage
}

{
  path: '/user/:id(\\d+)',
  component: UserPage
}

This allows only numeric ids.

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.