vuejs
/

Vue Dynamic Routing

Last Sync: Today

On this page

11
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

vuejs

Vue Dynamic Routing

What is Dynamic Routing?

Dynamic routing allows you to create routes with variable segments, enabling dynamic URLs like user profiles or product pages.

Basic Syntax

JavaScriptRead-only
1
const routes = [
  { path: '/user/:id', component: User }
];

Access Route Params

JavaScriptRead-only
1
this.$route.params.id

Template Example

HTMLRead-only
1
<p>User ID: {{ $route.params.id }}</p>

Multiple Params

JavaScriptRead-only
1
{ path: '/user/:id/post/:postId', component: Post }

Programmatic Navigation

JavaScriptRead-only
1
this.$router.push({ path: `/user/${id}` });

Named Routes with Params

JavaScriptRead-only
1
this.$router.push({ name: 'user', params: { id: 1 } });

Watching Route Changes

JavaScriptRead-only
1
watch: {
  '$route.params.id'(newId) {
    // handle change
  }
}

Best Practices

  • Use meaningful param names
  • Validate route params
  • Use named routes for navigation
  • Watch route changes for updates

Common Mistakes

  • Not handling route param changes
  • Incorrect param naming
  • Using path instead of name incorrectly
  • Not validating params

Conclusion

Dynamic routing is essential for building flexible Vue applications with dynamic URLs and content.

Try it yourself

<p>{{ $route.params.id }}</p>

Test Your Knowledge

Q1
of 3

Dynamic route syntax?

A
/user/id
B
/user/:id
C
/user{id}
D
/user-id
Q2
of 3

Access param?

A
this.id
B
$route.params
C
$router.params
D
params.id
Q3
of 3

Multiple params?

A
No
B
Yes
C
Only one
D
Only string

Frequently Asked Questions

What is dynamic routing?

Routing with variable URL segments.

How to access params?

Using $route.params.

Can we have multiple params?

Yes, multiple params can be defined.

Previous

vue router intro

Next

vue route guards

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.