I have a base layout template that I use for most of the pages of my app
<template>
<ion-page :data-simulating="(isGameSimulating) ? 'yes' : 'no'" id="main-content">
<ion-header>
</ion-header>
<ion-content>
<slot />
</ion-content>
<ion-segment slot="bottom" id="FooterMenu" :value="pageId">
<ion-segment-button @click="gotoPage('athletes')" :dataselected="(pageId == 'athletes') ? true : false" value="athletes">
<ion-icon :icon="people"></ion-icon>
<ion-label>Athletes</ion-label>
</ion-segment-button>
<ion-segment-button @click="gotoPage('training')" :dataselected="(pageId == 'training') ? true : false" value="training">
<ion-icon :icon="podium"></ion-icon>
<ion-label>Training</ion-label>
</ion-segment-button>
<ion-segment-button @click="gotoPage('lobby')" :dataselected="(pageId == 'lobby') ? true : false" value="lobby">
<ion-icon :icon="home"></ion-icon>
<ion-label>Lobby</ion-label>
</ion-segment-button>
<ion-segment-button @click="gotoPage('scouting')" :dataselected="(pageId == 'scouting') ? true : false" value="scouting">
<ion-icon :icon="eye">
<ion-badge>6</ion-badge>
</ion-icon>
<ion-label>Scouting</ion-label>
</ion-segment-button>
<ion-segment-button @click="gotoPage('calendar')" :dataselected="(pageId == 'calendar') ? true : false" value="calendar">
<ion-icon :icon="calendar"></ion-icon>
<ion-label>Calendar</ion-label>
</ion-segment-button>
</ion-segment>
</ion-page>
</template>
I use a ion-segment to navigate through pages, it works perfectly.
But if I add a ion-menu component at the top of my template (even an empty ion-menu)
<ion-menu side="start" menu-id="first" content-id="main-content"></ion-menu>
I get the following error every time I try to navigate to a page I have previously visited :
Uncaught TypeError: Cannot read property 'classList' of undefined
at eval (index.esm.js?d867:1088)
The error comes from ionic/vue on this line of code
requestAnimationFrame(() => enteringEl.classList.remove('ion-page-invisible'));
