fix(vue): ion-tab-bar no longer throws undefined error when re-creating tabs (#22261)

resolves #22255

packages/vue/src/components/IonTabBar.ts

@@ -9,10 +9,10 @@ export const IonTabBar = defineComponent({
       // TODO types
       const tabs = Array.from(this.$el.querySelectorAll('ion-tab-button')) as any[];
       const activeTab = tabs.find(tab => currentRoute.pathname.startsWith(tab.href));
+      const tabBar = this.$refs.ionTabBar;
 
-      if (activeTab) {
+      if (activeTab && tabBar) {
         ionRouter.handleSetCurrentTab(activeTab.tab);
-        const tabBar = this.$refs.ionTabBar;
         tabBar.selectedTab = activeTab.tab;
       }
     }

packages/vue/test-app/src/views/Tab1.vue

@@ -1,7 +1,10 @@
 <template>
-  <ion-page>
+  <ion-page data-pageid="tab1">
     <ion-header>
       <ion-toolbar>
+        <ion-buttons>
+          <ion-back-button default-href="/"></ion-back-button>
+        </ion-buttons>
         <ion-title>Tab 1</ion-title>
       </ion-toolbar>
     </ion-header>
@@ -18,11 +21,11 @@
 </template>
 
 <script>
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
+import { IonButtons, IonBackButton, IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
 
 export default  {
   name: 'Tab1',
-  components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
+  components: { IonButtons, IonBackButton, ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
 }
 </script>

packages/vue/test-app/src/views/Tabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <ion-page>
+  <ion-page data-pageid="tabs">
     <ion-content>
       <ion-tabs>
         <ion-tab-bar slot="bottom">
@@ -7,12 +7,12 @@
             <ion-icon :icon="triangle" />
             <ion-label>Tab 1</ion-label>
           </ion-tab-button>
-            
+
           <ion-tab-button tab="tab2" href="/tabs/tab2">
             <ion-icon :icon="ellipse" />
             <ion-label>Tab 2</ion-label>
           </ion-tab-button>
-          
+
           <ion-tab-button tab="tab3" href="/tabs/tab3">
             <ion-icon :icon="square" />
             <ion-label>Tab 3</ion-label>
@@ -32,10 +32,10 @@ export default {
   components: { IonContent, IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage },
   setup() {
     return {
-      ellipse, 
-      square, 
+      ellipse,
+      square,
       triangle,
     }
   }
 }
-</script>
+</script>

packages/vue/test-app/tests/e2e/specs/tabs.js

@@ -0,0 +1,19 @@
+describe('Tabs', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:8080')
+  })
+
+  it('should be able to create and destroy tabs', () => {
+    cy.get('#tabs').click();
+    cy.ionPageVisible('tab1');
+
+    cy.ionBackClick('tab1');
+    cy.ionPageDoesNotExist('tabs');
+
+    cy.get('#tabs').click();
+    cy.ionPageVisible('tab1');
+
+    cy.ionBackClick('tab1');
+    cy.ionPageDoesNotExist('tabs');
+  });
+})