bug: tabs do not work correctly when using pages outside tab routes

[darrylnoakes]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v6.x

Current Behavior

I am using Vue and Ionic 6.7.5.
Tabs do not work correctly when using pages outside tab routes.

This is the relevant route config:

const routes: RouteRecordRaw[] = [
  {
    path: "/",
    redirect: { name: "Index" },
  },
  {
    path: "/",
    component: MainPages,
    children: [
      {
        path: "",
        redirect: { name: "Index" },
      },
      {
        path: "index",
        name: "Index",
        component: IndexPage,
      },
      {
        path: "playlists",
        name: "Playlists",
        component: PlaylistsPage,
      },
      {
        path: "playlists/:id",
        name: "Playlist",
        component: PlaylistViewerPage,
      },
    ],
  },
  {
    path: "/settings",
    name: "Settings",
    component: SettingsPage,
  },
  {
    path: "/song/:id",
    name: "Song",
    component: SongViewerPage,
  },
];

The structure is:

Tabs
  Song Index
  Playlist Index
    Playlist Viewer
Song viewer
Settings

The playlists page has a list of playlists which can be viewed using the shared-route view. This view has a list of songs that can be pushed to. The song-viewing view is external to the tabs.

Page lifecycle events

The app starts on the index page. Navigating to the playlists page, a playlist, a song, and back (any method) does not trigger the playlist-viewing page's view entering event.
Index -> Playlists -> Playlist [nested] -> Song [external to tabs] -> (back) Playlist
The paths are:

• /index
• /playlists
• /playlists/xxx
• /song/yyy
• /playlists/xxx

After leaving the nested view (going back to the root view of the playlist tab), it works fine. Switching to the other tab and back also fixes it.
Leaving the nested view and coming back -- before doing anything else -- prevents the issue.
Starting on the playlists tab does not manifest the issue; however, going to the index tab sets the stage for it.
A complex orchestration of history state.

A button that navigates to the settings page is present on all the pages. This exhibits the same behavior when using it from the nested view.

The behavior does not appear to manifest when navigating to and from the external views directly from the root tab views; only from the nested view in the playlist tab.

Also, view leaving events are never triggered when navigating to a view external to tabs.

Tab navigation state

Navigating to a nested view in a tab, switching tabs, navigating to an "external" view, and going back clears the state of the first tab.

In this case:

• Go to playlist tab.
• Go to playlist viewer (in playlist tab).
• Switch to index tab.
• Go to song viewer (external-to-tabs view).
• Go back.
• Switch to the playlists tab.

The playlist tab shows the playlist index instead of the playlist viewer.

Expected Behavior

I expect to be able to use pages external to the tab routes.

Specifically:

• I expect page lifecycle events to always fire.
• I expect tabs to maintain their individual navigation state.

Steps to Reproduce

1. Create a tabbed Vue application with the route structure like the one described above. Include logging of the page lifecycle events.

2. Load the app on the index page. Navigate to the playlists page, a playlist, a song, and back (any method).
   Index -> Playlists -> Playlist [nested] -> Song [external to tabs] -> (back) Playlist
   The paths are:

   • /index
   • /playlists
   • /playlists/xxx
   • /song/yyy
   • /playlists/xxx

Code Reproduction URL

darrylnoakes/ionic-27847

Ionic Info

Ionic:

   Ionic CLI       : 6.16.3 (C:\Users\Darryl\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/vue 6.7.5

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v18.15.0 (C:\Users\Darryl\AppData\Local\Volta\tools\image\node\18.15.0\node.exe)
   npm    : 9.5.0
   OS     : Windows 10

Actually Windows 11.

Additional Information

Is this the correct behavior or a bug? Is it a known or unknown issue?
I do not know if this is an issue in Ionic 7.

---

Related issues:

• bug: IOS large title overlaps with back button #20482 (Comments seem to suggest that this route structure is supported.)
• bug: lifecycle events not working when using pages outside tabs router #27474

Possibly related:

• bug: switching between shared tab urls does not preserve individual tab stack history #25213
• bug: vue, inner tab lifecycle not firing on subsequent visits #25784 & fix(vue): lifecycles now fire on tabs pages #25786
• bug: wrong routing on ion-tabs with nested pages #27131
• bug: IonRouter's navigate() pop/back not working after displaying more than 2 ion-tab pages #27443

---

Video of reproducing the lifecycle events issue:

Repro.mp4

[dpa99c]

Possibly also related: bug: ionic/vue router issue with tabs: after second route change in a tab, cannot move outside of the tab route anymore

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[darrylnoakes]

I have added (in the initial report) a link to a reproduction repo: darrylnoakes/ionic-27847. I have left in almost the full route structure, to allow for testing of all the different flows I stated.

[darrylnoakes]

I have added a screen recording.

[darrylnoakes]

Also:

Navigating to a nested view in a tab, switching tabs, navigating to an "external" view, and going back clears the state of the first tab.

In this case:

• Go to playlist tab.
• Go to playlist viewer (in playlist tab).
• Switch to index tab.
• Go to song viewer (external-to-tabs view).
• Go back.
• Switch to the playlists tab.

The playlist tab shows the playlist index instead of the playlist viewer.

[darrylnoakes]

Currently, the only options I can see for now are as follows:

Don't use tabs, and figure out an alternative UI.
Not really what I feel like doing.

Present everything else in modals.
Fraught with more difficulties.
At the very least, I would need to implement some sort of modal state control based on the route, so that the hardware back button can be used to close the modal (something I need to do for some other modals...).
On a more semantics note, the semantics of a modal don't align with all the pages. The settings and login pages, maybe, but the song viewer is a full page in its own right, and a modal just doesn't feel "right". The navigation I can deal with, by setting it manually to the same as a normal page navigation (I hope).
Additionally, it would have to be styled to appear as a full page on desktop. Just another thing that has to be done.

[liamdebeasi]

Can you check your reproduction? I am getting a Can't resolve './src/main.js' error when I try to run it.

[darrylnoakes]

I did a fresh clone and ran yarn and then both yarn dev and yarn build + yarn preview. Everything ran fine and the app was served without issue. What specifically gave that error?

It also worked fine for me when opening the repo in StackBlitz Codeflow.

[liamdebeasi]

I can reproduce this issue after using yarn instead of npm. You can ignore my previous comment about not being able to reproduce the issue. I missed a step which is why I could not reproduce the issue the first time.

This looks to be another instance of #25213, so I am going to merge the two threads.

[darrylnoakes]

Hmm. So, basically, you can't really used child views in tabs with Vue (#25213)? And tabs seem to have other issues (#24594).

Does that issue also account for the behavior with tab-external routes and page lifecycle events? Or is a route structure with routes external to tabs not actually supported? E.g., if I changed the child view to a modal, would the issue with lifecycle events persist?

[liamdebeasi]

This issue is unique to tabs with child routes, so using a modal as a child view within a tab should be fine.

[darrylnoakes]

For anyone who's interested: I have settled for making the playlist viewer also external to the tabs.
The route structure has been changed from

Tabs
  Song Index
  Playlist Index
    Playlist Viewer
Song viewer
Settings

to

Tabs
  Song Index
  Playlist Index
Playlist Viewer
Song viewer
Settings

This means that it overlays the tabs router view (and you therefore cannot easily switch between viewing the song index and viewing a playlist), but I'll settle for that over having to implement something complicated.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.