Ionic-framework: bug: Vue: ion-router-outlet not passing Route Props

[CoinBR]

Bug Report

Ionic version:
[x] 5.x (Vue)

Current behavior:
When I setup Vue routes with props, the ion-router-outlet they not get passed to the Vue Component.

Expected behavior:
The Router props should be passed through ion-router-outlet to the Vue Component.

Steps to reproduce:

1. Create a route with props, example:
   { path: '/auth/login', component: () => import ('../views/LoginRegister.vue'), props: { action: 'Sign In' }, },

1. use <ion-router-outlet>

2. Try to access the route props in the component:
   setup(props){ console.log(props.action)

Other information:
I switched it to <vue-router>, and the props got passed.

Another user pointed that <ion-router-outlet> is not actually wrapping <vue-router>. It is actually a custom ionic implementation.
Still, it is important that it can forward props, and any other information that is in the <vue-router> api.

[liamdebeasi]

Thanks, I can reproduce the issue. I will work on a fix.

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/[email protected] @ionic/[email protected]

[CoinBR]

Thank you Liam!
I tested, and it is working: I'm getting the props now.

I still have another problem with , but I'll double check it first before opening a new issue:

Uncaught (in promise) TypeError: Cannot read property 'classList' of undefined
    at handlePageTransition (index.js?8a30:920)

Anyway, the props problem is fixed =) Thanks!

[CoinBR]

Not sure if I'm supposed to close the issue, Sorry =(

[liamdebeasi]

Glad it works! I will keep this issue open until the PR gets merged in.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/22476, and a fix will be available in an upcoming release of Ionic Framework.

[uriannrima]

Thank you Liam!
I tested, and it is working: I'm getting the props now.

I still have another problem with , but I'll double check it first before opening a new issue:

Uncaught (in promise) TypeError: Cannot read property 'classList' of undefined
    at handlePageTransition (index.js?8a30:920)

Anyway, the props problem is fixed =) Thanks!

It seems to happen when the "root" element rendered by the route isn't a IonPage. It happens with me when I try to use Vue Fragment as root node with an Ion page and Ion menu.

Edited: Jô is my wife nickname, lol.

[uriannrima]

I'm also sad to learn (from the IonRouterOutlet code comment) that named views are not supported.

[liamdebeasi]

It seems to happen when the "root" element rendered by the route isn't a Jô page. It happens with me when I try to use Vue Fragment as root node with an Ion page and Ion menu.

Thanks! I can keep an eye out for this.

I'm also sad to learn (from the IonRouterOutlet code comment) that named views are not supported.

We don't have named views in IonRouterOutlet at the moment, but if you have a use case for it please feel free to open a feature request.

[uriannrima]

@liamdebeasi I'm trying to make a side menu that could change per route, but it wouldn't be hard to find a workaround it, but I really would like to make a question about the allowed properties on some ion components while using JSX with Typescript: For some reason I'm allowed to add "slot" property to IonButton for example, but I can't in some elements like IonIcon ( while trying to put it at start of IonItem), is it something wrong with my setup or a general problem? Thanks. I would gladly open a bug if it is so. (For someone in need, you may workaround it by adding // @ts-ignore right before the slot property)

[liamdebeasi]

I'm trying to make a side menu that could change per route, but it wouldn't be hard to find a workaround it,

Ok that makes sense. I recommend creating a feature request for this as it will help other developers indicate that they would like this feature.

For some reason I'm allowed to add "slot" property to IonButton for example, but I can't in some elements like IonIcon ( while trying to put it at start of IonItem)

It's hard to say without seeing your code, but you should be able to provide a slot to ion-icon. I recommend posting on our forums first (http://forum.ionicframework.com/) to see if someone can spot what is going wrong. If after that you think this is a bug, feel free to open a bug report here on GitHub.

[CoinBR]

Thank you @uriannrima !

Your solution did work for me. When I place a <ion-page> as the root element of a <ion-router-outlet>, It stop duplicating my views, and stop giving me that error.

It still gives me some warnings about unregistered components, but I think is related to something else that is wrong in my code.

off-topic: is it ok to put an <ion-page> nested inside another <ion-page> ?

[asarach]

Hi ;
I think I have a related problem;
I am using ionic with vue3 and my routes are like this:
{ path: '/cat/:catId', component: CategoryPage }, { path: '/book/:bookId', component: BookPage }

in both Book an Category i watch for bookId and catId change ;
but the function inside watch is fired many times.

It seems that it watches BookId and CatId ever time I open the page,

I hope its clear i can open an issue and give a more details if not :)
thanks