fix: Empty `route.params` object on navigation

[quezadaesteban]

🐛 The bug

When navigating to a new page, the route.params object from useRoute is empty.

🛠️ To reproduce

https://stackblitz.com/edit/github-hz29vt?file=pages/tabs/tab1.vue

🌈 Expected behaviour

It should be an object with the current route parameters, query, etc.

ℹ️ Additional context

• It works properly on 0.6.1.
• After navigating, reloading the page makes the route.params object show the correct content.

[quezadaesteban]

This is still broken on @nuxtjs/ionic v.0.8.1. w. Nuxt 3.1.0.

[MikeyBeLike]

I had this issue, how I fixed it was by importing it from vue router.

import { useRoute } from 'vue-router';

and using this one rather than the auto imported one

Tested on "@nuxtjs/ionic": "^0.8.0", && "nuxt": "3.0.0",
Still an issue that needs to be observed

[chrisspiegl]

I ran into the same. The workaround provided by @MikeyBeLike seems to work.

I tried looking if there is a way to globally (in the nuxt.config.ts) import the vue-router but I have not found a way yet.

Maybe there is one… please let me/us know if you know a way.

Thanks

[quezadaesteban]

The solution given by @MikeyBeLike worked! In my case, I have something like this in the composable (so it is global). I only had to add the import in the composable, and everything worked again as expected.

import { useRoute } from 'vue-router'

// ...

export const useNavigation = () => {
 const router = useIonRouter();
 const route = useRoute();

 return {
 route,

 push: (name: RouteName, options?: RouteOptions) => {
 router.push({ name, params: options?.params });
 },

 replace: (name: RouteName) => router.replace({ name }),
 };
};

So in my components, I can do:

const navigation = useNavigation()
// and then
navigation.route // same as const route = useRoute()
navigation.push('home') // route name is hinted by RouteName type.
navigation.replace('home') // same as `push`

Regardless, it is still an issue that needs to be addressed.

[chrisspiegl]

That's "a way" but does not solve the issue of having to use something non standard.