How do you create a dynamic route and access the id parameter?

WHAT THIS TESTS: Vue Router dynamic route matching syntax, the route object shape, and component lifecycle behavior when parameters change. Interviewers want to see that you know how to declare params, how to consume them idiomatically, and that you understand component reuse implications.

A GOOD ANSWER COVERS: First, declare the dynamic segment by prefixing the parameter name with a colon in the route path, such as path: '/products/:id'. Second, explain that when a route matches, the param values are placed on route.params as strings. Third, describe the two main ways to access them: in the Composition API, call useRoute from vue-router and read route.params.id; in the Options API or templates, use the global route object such as route.params.id. Fourth, emphasize that navigating from /products/1 to /products/2 reuses the same component instance for performance, so lifecycle hooks like onMounted do not run again. Fifth, mention the correct patterns for reacting to changes: either watch route.params.id directly, or use the beforeRouteUpdate in-component guard to fetch data or cancel navigation.

COMMON WRONG ANSWERS: A major red flag is suggesting that you parse window.location.href or use raw regex to extract the id instead of using the router's exposed route object. Another mistake is claiming that the component will unmount and remount when the id changes, which leads to suggesting that onMounted is the right place to fetch data. Some candidates also forget that route params are always strings and suggest comparing them with strict number equality without conversion.

LIKELY FOLLOW-UPS: The interviewer may ask how to handle multiple params in one path, such as /users/:userId/posts/:postId, and the answer is that each colon segment maps to a key on route.params. They might also ask about optional params or custom param regular expressions, which Vue Router supports by adding a regex in parentheses after the param, like /products/:id(\\d+). Another common follow-up is how to fetch data when the route changes; the best answers mention watching the param or using beforeRouteUpdate rather than remounting.

ONE CONCRETE EXAMPLE: Suppose you have a ProductDetail component. In your router config, you write { path: '/products/:id', component: ProductDetail }. Inside ProductDetail with Composition API, you import useRoute, call const route = useRoute(), and render the id with route.params.id. If you need to load product data when the id changes, you set up a watcher on () => route.params.id and call your fetch function inside it. Alternatively, you can use onBeforeRouteUpdate((to, from) => { ... }) to trigger a fetch before the navigation completes, and even abort the navigation if the fetch fails.