How to prevent split-pane create new pages when I swithc between pages

I use Ionic 5 + Vue 3’s composition API.

This is very annoying because my APP requires running something in the background. I could not put everything inside app.vue…

This animation shows on that page if I did something, such as opening a file, selecting another page then coming back, everything on the pages is lost. A new page was created.

ionic issue

Same story for all the pages in my app.

I am not sure this is expected because there is no reason for it.
Ionic said in its document that I should not use VUE’s keep pages API.

I also notice, the Ionic didn’t close the previous pages but created a new one.
Because if I init a setInterval to print something in the console for 10 seconds, after switching out and back a few times, it will print much quicker.

Here are the code for the router, not sure if it is related.

import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '',
    redirect: '/pages/summary'
  },
  {
    path: '/pages/summary',
    component: () => import ('../summary/summary-view.vue')
  },
  {
    path: '/pages/parameters',
    component: () => import ('../msgparser/param-view.vue')
  },
  {
    path: '/pages/waypoint',
    component: () => import ('../map/map-view.vue')
  },
  {
    path: '/pages/control',
    component: () => import ('../control/control-view.vue')
  },
  {
    path: '/pages/file',
    component: () => import ('../file/file-view.vue')
  },
]

Thanks.

I fixed the problem by changing the template attribute

router-direction=“root” to router-direction=“forward”

              <ion-item
                @click="selectedIndex = i"
                router-direction="forward" 
                :router-link="p.url"
                lines="none"
                detail="false"
                class="hydrated"
                :class="{ selected: selectedIndex === i }"
              >
                <ion-icon
                  slot="start"
                  :ios="p.iosIcon"
                  :md="p.mdIcon"
                ></ion-icon>
                <ion-label>{{ p.title }}</ion-label>
              </ion-item>
1 Like