Hi,
Since I tried various methods to retrieve the parameters of the current route:
{
path: '/orders/:ordersId/',
name: 'orders-detail',
component: DetailOrders,
}
with these Vue tips:
-
props.f7router.params.ordersId
→ returns undefined
-
props.f7router.currentRoute.params.ordersId
→ returns undefined
both return UNDEFINED, leaving me feeling quite desperate. Then, I revisited the initial setup of the F7 project and noticed that the setup URL had parameters. After some investigation, I discovered that I needed to use props.f7route
instead of props.f7router
!
I changed my code from:
props: {
f7router: Object,
}
to:
props: {
f7route: Object,
}
and props.f7route.params.id
is the key!
as you can see in /src/pages/product.vue
Hope this information is helpful.
1 Like
Hey everyone,
I ran into the same issue recently, where trying to access GET parameters from the route was returning undefined
. After some digging, here’s what helped me fix it:
-
Double-check your route definition – Make sure you’re using the right syntax, especially if you’re using frameworks like Express, Next.js, or React Router.
For example, in Express:
js
CopyEdit
app.get('/your-route', (req, res) => {
console.log(req.query); // should return your GET params
});
-
For Next.js, if you’re using the
useRouter()
hook, remember:
js
CopyEdit
const router = useRouter();
const { id } = router.query; // make sure you're accessing after router is ready
-
Ensure you’re on the client-side (if applicable) – Sometimes
router.query
is undefined on the first render (especially in Next.js). You can guard against this using:
js
CopyEdit
useEffect(() => {
if (router.isReady) {
console.log(router.query);
}
}, [router.isReady]);
-
Check your URL structure – Sometimes a missing
?
or incorrect parameter name leads to this. Make sure you’re accessing the param with the correct key.
Hope this helps someone else facing the same issue! Let me know if you’re using a specific framework and I can help dig deeper. 