New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: Vue: ion-router-outlet not passing Route Props #22472
Comments
Thanks, I can reproduce the issue. I will work on a fix. |
Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?
|
Thank you Liam! I still have another problem with , but I'll double check it first before opening a new issue:
Anyway, the props problem is fixed =) Thanks! |
Not sure if I'm supposed to close the issue, Sorry =( |
Glad it works! I will keep this issue open until the PR gets merged in. |
Thanks for the issue. This has been resolved via #22476, and a fix will be available in an upcoming release of Ionic Framework. |
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. |
I'm also sad to learn (from the IonRouterOutlet code comment) that named views are not supported. |
Thanks! I can keep an eye out for this.
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. |
@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) |
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.
It's hard to say without seeing your code, but you should be able to provide a slot to |
Thank you @uriannrima ! Your solution did work for me. When I place a 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 |
Hi ; in both Book an Category i watch for bookId and catId change ; 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 for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
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:
Create a route with props, example:
{ path: '/auth/login', component: () => import ('../views/LoginRegister.vue'), props: { action: 'Sign In' }, },
use
<ion-router-outlet>
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.The text was updated successfully, but these errors were encountered: