Hey guys!!
I am utilizing Vue alongside Ionic and employing ion-nav for navigation between pages outside the router as per the documentation (ion-nav: Nav View Component for Ionic Framework Apps). I have followed the tutorial and everything works as expected until I attempt to define PageTwo using defineComponent from Vue directly within PageOne.vue, instead of creating a separate file for the component.
Here’s a snippet of my code in PageOne.vue:
<template>
<!-- ... rest of the template -->
<ion-nav-link
router-direction="forward"
:component="component"
>
<ion-button>Go to Page Two</ion-button>
</ion-nav-link>
</template>
<script lang="ts">
// ... imports
export default {
data() {
const PageTwo = defineComponent(() => `<h1>Page two</h1>`);
return {
component: markRaw(PageTwo)
};
},
};
</script>
The issue arises when navigating from PageOne to PageTwo - the exit animation for PageOne executes correctly, but PageTwo doesn’t render at all.
I’ve created a minimal reproduction repository to demonstrate the issue: https://github.com/onmax/ionic-ion-nav-bug-vue/blob/872d954a04959790f894e96a7fc8bfb5dbe08ad6/src/components/PageOne.vue
I am seeking assistance to resolve this rendering problem. Any insights or suggestions would be highly appreciated! Thanks