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.

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.

1 post - 1 participant

Read full topic