Route params
Dynamic segments in a path, like :id, are captured as params that your component can read.
In this page:
Syntax
{ path: '/resource/:id', component: ComponentName }
<p>{{ $route.params.id }}</p>Route params
Define a route such as /user/:id and read the value from $route.params.id or useRoute().params.id.
Params are strings. When only the param changes, the same component instance is reused, so watch the param to reload data.
Props: true passes params as props.
Note:
Set props: true on the route to receive params as component props.
Example: Route params
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>
</head>
<body>
<div id="app"><router-view></router-view></div>
<script>
const User = { template: "<p>User #{{ $route.params.id }} (type {{ typeof $route.params.id }})</p>" };
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: [{ path: "/user/:id", component: User }],
});
Vue.createApp({}).use(router).mount("#app");
router.push("/user/42").then(async () => {
await Vue.nextTick();
console.log(document.querySelector("p").textContent);
});
</script>
</body>
</html>
<!-- Output:
Rendered: User #42 (type string)
console: User #42 (type string)
-->Live Example
Related Topics
Common Mistakes
- Expecting params to be numbers
- Not reacting when only the param changes
- Reading params before navigation completes
Chapter Summary
- :id defines a dynamic segment
- Read via $route.params
- Params are strings
- Watch params when the component is reused
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: