[Vuejs]-Cannot make Vue route with param to work with component

0👍

You can use beforeEnter hook for debugging. Refer this link for more router guards.

0👍

You probably need to pass the :id parameter to the component using the route props config:

{
path: '/product/:id',
name: "ProductDetails",
component: ProductDetails,
props: true
}

props: true, passes current named parameters as props with the same name. In this case, it assues you have a prop ‘id’ in ProductDetails to read from.

Another way is to read the route param inside the component:

$route.params.id

Other alternatives can be found here:
https://router.vuejs.org/guide/essentials/passing-props.html

0👍

Finally, I got it to work. I’ve added "mode: history" to "const router = new VueRouter(…)" and now new routes are being resolved. Still I have no idea why new routes (not even parametrized as it turned out later) don’t work in hash mode while old routes like "/profile" work fine.
The urls I’ve tested did not contain a hash ‘#’.

Leave a comment