-
-
Notifications
You must be signed in to change notification settings - Fork 37
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
fix: @vueuse/head doesn't function properly with ionic #6
Comments
Got this problem long time ago, before this module even exist, and the only option was to remove all ionic routing. they are thinking of a solution as you can see here: ionic-team/ionic-framework#25184 |
Did you try anything like the workaround suggested in the issue? As much as I think ionic's routing has and causes problems, I don't think removing it entirely is a viable workaround. Also, for what it's worth, I'm overriding the routing from the tab-bar component - in this case for a different reason (I want to call // Use router.replace to tear down all the components that ionic left alive
const router = useIonRouter();
function handleClick(tab: Tab) {
router.replace(tab.href);
} <IonTabBar>
<IonTabButton
v-for="tab in tabs"
:key="tab.name"
:tab="tab.name"
:href="tab.href"
:selected="selectedTab === tab"
@click.prevent="handleClick(tab)"
>
<IonLabel>{{ tab.label }}</IonLabel>
</IonTabButton>
</IonTabBar> |
@callumacrae the problem is even deeper for me because i want to use nested routing and that not possible in ionic-router. |
🐛 The bug
Hey!
Not using this project, but had a problem on another project I think you'll run into so figured I'd make you aware as it's not immediately obvious
https://ionicframework.com/docs/vue/lifecycle#how-ionic-framework-handles-the-life-of-a-page
The way ionic handles the lifecycle of a page is very different to how vue does it, and as a consequence of this, the
onBeforeMount
hook isn't always called when you'd expect it to be.To replicate, go to the stackblitz below, inspect the
<title>
of the ionic app, and click between the first and second tabs a few times. You'll notice that the title stops updating. This is because the old tab still exists in the dom.It looks like you can probably work around this by importing
injectHead
from@vueuse/head
,onIonViewWillLeave
from@ionic/vue
and creating your ownuseHead
function that handles the teardown (and setting up again, potentially) with the correct hook. I haven't actually tried this though as I gave up and went back to doing everything manually.Something like this! The
onIonViewDidEnter
is required for when a user goes back to a page which has been fake-unmounted by ionic. TheaddHeadObjs
can probably be deduplicated but as I said, I haven't tested this!(vue-meta has the same problem)
🛠️ To reproduce
https://stackblitz.com/edit/github-xdesgf-6vva3r?file=pages%2Ftabs.vue,pages%2Ftabs%2Ftab1.vue,pages%2Ftabs%2Ftab2.vue,pages%2Ftabs%2Ftab3.vue
🌈 Expected behaviour
ℹ️ Additional context
No response
The text was updated successfully, but these errors were encountered: