From 6109929ad854f36dfd0ef559fa2308d5d4a646f0 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Thu, 17 Dec 2020 21:44:04 +0000
Subject: [PATCH 1/5] fix tabs matchinbg

---
 packages/vue-router/src/viewStacks.ts         |  2 +-
 .../vue/src/components/IonRouterOutlet.ts     | 12 ++---------
 packages/vue/src/components/IonTabs.ts        |  2 +-
 packages/vue/test-app/src/router/index.ts     | 20 +++++++++----------
 packages/vue/test-app/src/views/Tabs.vue      |  8 +++++++-
 packages/vue/test-app/tests/e2e/specs/tabs.js | 19 +++++++++++++++++-
 .../vue/test-app/tests/unit/tab-bar.spec.ts   |  4 ++--
 7 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/packages/vue-router/src/viewStacks.ts b/packages/vue-router/src/viewStacks.ts
index 3688d193eb7..215f39bd599 100644
--- a/packages/vue-router/src/viewStacks.ts
+++ b/packages/vue-router/src/viewStacks.ts
@@ -54,7 +54,7 @@ export const createViewStacks = (router: Router) => {
       }
 
       const resolvedPath = router.resolve(path);
-      const findMatchedRoute = resolvedPath.matched.find((matchedRoute: RouteLocationMatched) => matchedRoute === viewItem.matchedRoute && (path === viewItem.pathname || matchedRoute.path.includes(':')));
+      const findMatchedRoute = resolvedPath.matched.find((matchedRoute: RouteLocationMatched) => matchedRoute === viewItem.matchedRoute);
 
       if (findMatchedRoute) {
         return viewItem;
diff --git a/packages/vue/src/components/IonRouterOutlet.ts b/packages/vue/src/components/IonRouterOutlet.ts
index 9530f22a6a1..36627bcb7c2 100644
--- a/packages/vue/src/components/IonRouterOutlet.ts
+++ b/packages/vue/src/components/IonRouterOutlet.ts
@@ -17,19 +17,11 @@ import { fireLifecycle, generateId, getConfig } from '../utils';
 let viewDepthKey: InjectionKey<0> = Symbol(0);
 export const IonRouterOutlet = defineComponent({
   name: 'IonRouterOutlet',
-  setup(_, { attrs }) {
+  setup() {
     const injectedRoute = inject(routeLocationKey)!;
     const route = useRoute();
     const depth = inject(viewDepthKey, 0);
-    const matchedRouteRef: any = computed(() => {
-      const matchedRoute = route.matched[depth];
-
-      if (matchedRoute && attrs.tabs && route.matched[depth + 1]) {
-        return route.matched[route.matched.length - 1];
-      }
-
-      return matchedRoute;
-    });
+    const matchedRouteRef: any = computed(() => route.matched[depth]);
 
     provide(viewDepthKey, depth + 1)
     provide(matchedRouteKey, matchedRouteRef);
diff --git a/packages/vue/src/components/IonTabs.ts b/packages/vue/src/components/IonTabs.ts
index e292d530354..c3bf0d706bc 100644
--- a/packages/vue/src/components/IonTabs.ts
+++ b/packages/vue/src/components/IonTabs.ts
@@ -19,7 +19,7 @@ export const IonTabs = defineComponent({
             'contain': 'layout size style'
         }
       }, [
-        h(IonRouterOutlet, { tabs: true })
+        h(IonRouterOutlet)
       ])
     ];
 
diff --git a/packages/vue/test-app/src/router/index.ts b/packages/vue/test-app/src/router/index.ts
index 5ec99223b94..644d29ea72c 100644
--- a/packages/vue/test-app/src/router/index.ts
+++ b/packages/vue/test-app/src/router/index.ts
@@ -85,17 +85,15 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: 'tab1',
-        component: () => import('@/views/Tab1.vue'),
-        children: [
-          {
-            path: 'child-one',
-            component: () => import('@/views/Tab1ChildOne.vue')
-          },
-          {
-            path: 'child-two',
-            component: () => import('@/views/Tab1ChildTwo.vue')
-          }
-        ]
+        component: () => import('@/views/Tab1.vue')
+      },
+      {
+        path: 'tab1/child-one',
+        component: () => import('@/views/Tab1ChildOne.vue')
+      },
+      {
+        path: 'tab1/child-two',
+        component: () => import('@/views/Tab1ChildTwo.vue')
       },
       {
         path: 'tab2',
diff --git a/packages/vue/test-app/src/views/Tabs.vue b/packages/vue/test-app/src/views/Tabs.vue
index 5b91e6716f9..a63b3af6123 100644
--- a/packages/vue/test-app/src/views/Tabs.vue
+++ b/packages/vue/test-app/src/views/Tabs.vue
@@ -17,6 +17,11 @@
             <ion-icon :icon="square" />
             <ion-label>Tab 3</ion-label>
           </ion-tab-button>
+
+          <ion-tab-button tab="tab4" href="/tabs/tab4">
+            <ion-icon :icon="cog" />
+            <ion-label>Tab 4</ion-label>
+          </ion-tab-button>
         </ion-tab-bar>
       </ion-tabs>
     </ion-content>
@@ -25,13 +30,14 @@
 
 <script lang="ts">
 import { IonTabBar, IonTabButton, IonTabs, IonContent, IonLabel, IonIcon, IonPage } from '@ionic/vue';
-import { ellipse, square, triangle } from 'ionicons/icons';
+import { cog, ellipse, square, triangle } from 'ionicons/icons';
 
 export default {
   name: 'Tabs',
   components: { IonContent, IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage },
   setup() {
     return {
+      cog,
       ellipse,
       square,
       triangle,
diff --git a/packages/vue/test-app/tests/e2e/specs/tabs.js b/packages/vue/test-app/tests/e2e/specs/tabs.js
index 0af23bad187..94e17af8ddd 100644
--- a/packages/vue/test-app/tests/e2e/specs/tabs.js
+++ b/packages/vue/test-app/tests/e2e/specs/tabs.js
@@ -172,7 +172,24 @@ describe('Tabs', () => {
     cy.ionPageVisible('tab1');
     cy.ionPageHidden('routing');
     cy.ionPageHidden('tab2');
-  })
+  });
+
+  // Verifies 1 of 2 fixes for https://github.com/ionic-team/ionic-framework/issues/22519
+  it('should not create a new tabs instance when switching between tabbed and non-tabbed contexts', () => {
+    cy.visit('http://localhost:8080/tabs/tab1');
+
+    cy.routerPush('/');
+    cy.ionPageHidden('tabs');
+    cy.ionPageVisible('home');
+
+    cy.routerPush('/tabs/tab2');
+    cy.ionPageHidden('tab1');
+
+    cy.ionPageHidden('home');
+
+    cy.ionPageVisible('tab2');
+    cy.ionPageVisible('tabs');
+  });
 })
 
 describe('Tabs - Swipe to Go Back', () => {
diff --git a/packages/vue/test-app/tests/unit/tab-bar.spec.ts b/packages/vue/test-app/tests/unit/tab-bar.spec.ts
index 3021ca7d946..67a60a87c3c 100644
--- a/packages/vue/test-app/tests/unit/tab-bar.spec.ts
+++ b/packages/vue/test-app/tests/unit/tab-bar.spec.ts
@@ -68,7 +68,7 @@ describe('ion-tab-bar', () => {
     });
 
     const innerHTML = wrapper.find('ion-tabs').html();
-    expect(innerHTML).toContain(`<div class="tabs-inner" style="position: relative; flex: 1; contain: layout size style;"><ion-router-outlet tabs="true"></ion-router-outlet></div><ion-tab-bar slot="bottom"></ion-tab-bar>`);
+    expect(innerHTML).toContain(`<div class="tabs-inner" style="position: relative; flex: 1; contain: layout size style;"><ion-router-outlet></ion-router-outlet></div><ion-tab-bar slot="bottom"></ion-tab-bar>`);
 
   });
 
@@ -100,7 +100,7 @@ describe('ion-tab-bar', () => {
     });
 
     const innerHTML = wrapper.find('ion-tabs').html();
-    expect(innerHTML).toContain(`<div class="tabs-inner" style="position: relative; flex: 1; contain: layout size style;"><ion-router-outlet tabs="true"></ion-router-outlet></div><ion-tab-bar></ion-tab-bar></ion-tabs>`)
+    expect(innerHTML).toContain(`<div class="tabs-inner" style="position: relative; flex: 1; contain: layout size style;"><ion-router-outlet></ion-router-outlet></div><ion-tab-bar></ion-tab-bar></ion-tabs>`)
   });
 
   // Verifies the fix for https://github.com/ionic-team/ionic-framework/issues/22642

From 30c087c9bff119aa1781cc47184159c3baebb51b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Thu, 17 Dec 2020 16:44:47 -0500
Subject: [PATCH 2/5] fix

---
 packages/vue/test-app/src/views/Tabs.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/vue/test-app/src/views/Tabs.vue b/packages/vue/test-app/src/views/Tabs.vue
index a63b3af6123..5b91e6716f9 100644
--- a/packages/vue/test-app/src/views/Tabs.vue
+++ b/packages/vue/test-app/src/views/Tabs.vue
@@ -17,11 +17,6 @@
             <ion-icon :icon="square" />
             <ion-label>Tab 3</ion-label>
           </ion-tab-button>
-
-          <ion-tab-button tab="tab4" href="/tabs/tab4">
-            <ion-icon :icon="cog" />
-            <ion-label>Tab 4</ion-label>
-          </ion-tab-button>
         </ion-tab-bar>
       </ion-tabs>
     </ion-content>
@@ -30,14 +25,13 @@
 
 <script lang="ts">
 import { IonTabBar, IonTabButton, IonTabs, IonContent, IonLabel, IonIcon, IonPage } from '@ionic/vue';
-import { cog, ellipse, square, triangle } from 'ionicons/icons';
+import { ellipse, square, triangle } from 'ionicons/icons';
 
 export default {
   name: 'Tabs',
   components: { IonContent, IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage },
   setup() {
     return {
-      cog,
       ellipse,
       square,
       triangle,

From 0f29986d194485d2bf812cbc650fbffc9cba1947 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Thu, 21 Jan 2021 16:32:40 -0500
Subject: [PATCH 3/5] support both tab setup

---
 packages/vue-router/src/viewStacks.ts         | 22 +++++++----
 .../vue/src/components/IonRouterOutlet.ts     | 35 +++++++++++++-----
 packages/vue/test-app/src/router/index.ts     | 37 ++++++++++++++++++-
 packages/vue/test-app/tests/e2e/specs/tabs.js | 17 +++++++++
 .../vue/test-app/tests/unit/tab-bar.spec.ts   |  6 ++-
 5 files changed, 96 insertions(+), 21 deletions(-)

diff --git a/packages/vue-router/src/viewStacks.ts b/packages/vue-router/src/viewStacks.ts
index 215f39bd599..45bd6d31a06 100644
--- a/packages/vue-router/src/viewStacks.ts
+++ b/packages/vue-router/src/viewStacks.ts
@@ -22,16 +22,16 @@ export const createViewStacks = (router: Router) => {
     viewItem.ionRoute = true;
   }
 
-  const findViewItemByRouteInfo = (routeInfo: RouteInfo, outletId?: number) => {
-    return findViewItemByPath(routeInfo.pathname, outletId);
+  const findViewItemByRouteInfo = (routeInfo: RouteInfo, outletId?: number, useDeprecatedRouteSetup: boolean = false) => {
+    return findViewItemByPath(routeInfo.pathname, outletId, false, useDeprecatedRouteSetup);
   }
 
-  const findLeavingViewItemByRouteInfo = (routeInfo: RouteInfo, outletId?: number, mustBeIonRoute: boolean = true) => {
-    return findViewItemByPath(routeInfo.lastPathname, outletId, mustBeIonRoute);
+  const findLeavingViewItemByRouteInfo = (routeInfo: RouteInfo, outletId?: number, mustBeIonRoute: boolean = true, useDeprecatedRouteSetup: boolean = false) => {
+    return findViewItemByPath(routeInfo.lastPathname, outletId, mustBeIonRoute, useDeprecatedRouteSetup);
   }
 
-  const findViewItemByPathname = (pathname: string, outletId?: number) => {
-    return findViewItemByPath(pathname, outletId);
+  const findViewItemByPathname = (pathname: string, outletId?: number, useDeprecatedRouteSetup: boolean = false) => {
+    return findViewItemByPath(pathname, outletId, false, useDeprecatedRouteSetup);
   }
 
   const findViewItemInStack = (path: string, stack: ViewItem[]): ViewItem | undefined => {
@@ -44,7 +44,7 @@ export const createViewStacks = (router: Router) => {
     })
   }
 
-  const findViewItemByPath = (path: string, outletId?: number, mustBeIonRoute: boolean = false): ViewItem | undefined => {
+  const findViewItemByPath = (path: string, outletId?: number, mustBeIonRoute: boolean = false, useDeprecatedRouteSetup: boolean = false): ViewItem | undefined => {
     const matchView = (viewItem: ViewItem) => {
       if (
         (mustBeIonRoute && !viewItem.ionRoute) ||
@@ -54,7 +54,13 @@ export const createViewStacks = (router: Router) => {
       }
 
       const resolvedPath = router.resolve(path);
-      const findMatchedRoute = resolvedPath.matched.find((matchedRoute: RouteLocationMatched) => matchedRoute === viewItem.matchedRoute);
+      let findMatchedRoute;
+      // TODO: Remove in Ionic Vue v6.0
+      if (useDeprecatedRouteSetup) {
+        findMatchedRoute = resolvedPath.matched.find((matchedRoute: RouteLocationMatched) => matchedRoute === viewItem.matchedRoute && (path === viewItem.pathname || matchedRoute.path.includes(':')));
+      } else {
+        findMatchedRoute = resolvedPath.matched.find((matchedRoute: RouteLocationMatched) => matchedRoute === viewItem.matchedRoute);
+      }
 
       if (findMatchedRoute) {
         return viewItem;
diff --git a/packages/vue/src/components/IonRouterOutlet.ts b/packages/vue/src/components/IonRouterOutlet.ts
index 36627bcb7c2..c56b268f3ec 100644
--- a/packages/vue/src/components/IonRouterOutlet.ts
+++ b/packages/vue/src/components/IonRouterOutlet.ts
@@ -17,11 +17,26 @@ import { fireLifecycle, generateId, getConfig } from '../utils';
 let viewDepthKey: InjectionKey<0> = Symbol(0);
 export const IonRouterOutlet = defineComponent({
   name: 'IonRouterOutlet',
-  setup() {
+  setup(_, { attrs }) {
     const injectedRoute = inject(routeLocationKey)!;
     const route = useRoute();
     const depth = inject(viewDepthKey, 0);
-    const matchedRouteRef: any = computed(() => route.matched[depth]);
+    let usingDeprecatedRouteSetup = false;
+
+    // TODO: Remove in Ionic Vue v6.0
+    if (attrs.tabs && route.matched[depth].children.length > 0) {
+      console.warn('[@ionic/vue Deprecation]: Your child routes are nested inside of each tab in your routing config. This format will not be supported in Ionic Vue v6.0. Instead, write your child routes as sibling routes. See https://ionicframework.com/docs/vue/navigation#child-routes-within-tabs for more information.');
+      usingDeprecatedRouteSetup = true;
+    }
+    const matchedRouteRef: any = computed(() => {
+      const matchedRoute = route.matched[depth];
+
+      if (matchedRoute && attrs.tabs && route.matched[depth + 1] && usingDeprecatedRouteSetup) {
+        return route.matched[route.matched.length - 1];
+      }
+
+      return matchedRoute;
+    });
 
     provide(viewDepthKey, depth + 1)
     provide(matchedRouteKey, matchedRouteRef);
@@ -68,15 +83,15 @@ export const IonRouterOutlet = defineComponent({
        * to make sure the view is in the outlet we want.
        */
       const routeInfo = ionRouter.getCurrentRouteInfo();
-      const enteringViewItem = viewStacks.findViewItemByRouteInfo({ pathname: routeInfo.pushedByRoute || '' }, id);
+      const enteringViewItem = viewStacks.findViewItemByRouteInfo({ pathname: routeInfo.pushedByRoute || '' }, id, usingDeprecatedRouteSetup);
 
       return !!enteringViewItem;
     }
     const onStart = async () => {
       const routeInfo = ionRouter.getCurrentRouteInfo();
       const { routerAnimation } = routeInfo;
-      const enteringViewItem = viewStacks.findViewItemByRouteInfo({ pathname: routeInfo.pushedByRoute || '' }, id);
-      const leavingViewItem = viewStacks.findViewItemByRouteInfo(routeInfo, id);
+      const enteringViewItem = viewStacks.findViewItemByRouteInfo({ pathname: routeInfo.pushedByRoute || '' }, id, usingDeprecatedRouteSetup);
+      const leavingViewItem = viewStacks.findViewItemByRouteInfo(routeInfo, id, usingDeprecatedRouteSetup);
 
       if (leavingViewItem) {
         let animationBuilder = routerAnimation;
@@ -131,7 +146,7 @@ export const IonRouterOutlet = defineComponent({
          * re-hide the page that was going to enter.
          */
         const routeInfo = ionRouter.getCurrentRouteInfo();
-        const enteringViewItem = viewStacks.findViewItemByRouteInfo({ pathname: routeInfo.pushedByRoute || '' }, id);
+        const enteringViewItem = viewStacks.findViewItemByRouteInfo({ pathname: routeInfo.pushedByRoute || '' }, id, usingDeprecatedRouteSetup);
         enteringViewItem.ionPageElement.setAttribute('aria-hidden', 'true');
         enteringViewItem.ionPageElement.classList.add('ion-page-hidden');
       }
@@ -186,14 +201,14 @@ export const IonRouterOutlet = defineComponent({
       const routeInfo = ionRouter.getCurrentRouteInfo();
       const { routerDirection, routerAction, routerAnimation, prevRouteLastPathname } = routeInfo;
 
-      const enteringViewItem = viewStacks.findViewItemByRouteInfo(routeInfo, id);
-      let leavingViewItem = viewStacks.findLeavingViewItemByRouteInfo(routeInfo, id);
+      const enteringViewItem = viewStacks.findViewItemByRouteInfo(routeInfo, id, usingDeprecatedRouteSetup);
+      let leavingViewItem = viewStacks.findLeavingViewItemByRouteInfo(routeInfo, id, true, usingDeprecatedRouteSetup);
       const enteringEl = enteringViewItem.ionPageElement;
 
       if (enteringViewItem === leavingViewItem) return;
 
       if (!leavingViewItem && prevRouteLastPathname) {
-        leavingViewItem = viewStacks.findViewItemByPathname(prevRouteLastPathname, id);
+        leavingViewItem = viewStacks.findViewItemByPathname(prevRouteLastPathname, id, usingDeprecatedRouteSetup);
       }
 
       fireLifecycle(enteringViewItem.vueComponent, enteringViewItem.vueComponentRef, LIFECYCLE_WILL_ENTER);
@@ -288,7 +303,7 @@ export const IonRouterOutlet = defineComponent({
       }
 
       const currentRoute = ionRouter.getCurrentRouteInfo();
-      let enteringViewItem = viewStacks.findViewItemByRouteInfo(currentRoute, id);
+      let enteringViewItem = viewStacks.findViewItemByRouteInfo(currentRoute, id, usingDeprecatedRouteSetup);
 
       if (!enteringViewItem) {
         enteringViewItem = viewStacks.createViewItem(id, matchedRouteRef.value.components.default, matchedRouteRef.value, currentRoute);
diff --git a/packages/vue/test-app/src/router/index.ts b/packages/vue/test-app/src/router/index.ts
index 644d29ea72c..0ac97bdd765 100644
--- a/packages/vue/test-app/src/router/index.ts
+++ b/packages/vue/test-app/src/router/index.ts
@@ -85,7 +85,42 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: 'tab1',
-        component: () => import('@/views/Tab1.vue')
+        component: () => import('@/views/Tab1.vue'),
+        children: [
+          {
+            path: 'child-one',
+            component: () => import('@/views/Tab1ChildOne.vue')
+          },
+          {
+            path: 'child-two',
+            component: () => import('@/views/Tab1ChildTwo.vue')
+          }
+        ]
+      },
+      {
+        path: 'tab2',
+        component: () => import('@/views/Tab2.vue')
+      },
+      {
+        path: 'tab3',
+        beforeEnter: (to, from, next) => {
+          next({ path: '/tabs/tab1' });
+        },
+        component: () => import('@/views/Tab3.vue')
+      }
+    ]
+  },
+  {
+    path: '/tabs-new/',
+    component: () => import('@/views/Tabs.vue'),
+    children: [
+      {
+        path: '',
+        redirect: '/tabs-new/tab1'
+      },
+      {
+        path: 'tab1',
+        component: () => import('@/views/Tab1.vue'),
       },
       {
         path: 'tab1/child-one',
diff --git a/packages/vue/test-app/tests/e2e/specs/tabs.js b/packages/vue/test-app/tests/e2e/specs/tabs.js
index 94e17af8ddd..020af3fa5ed 100644
--- a/packages/vue/test-app/tests/e2e/specs/tabs.js
+++ b/packages/vue/test-app/tests/e2e/specs/tabs.js
@@ -190,6 +190,23 @@ describe('Tabs', () => {
     cy.ionPageVisible('tab2');
     cy.ionPageVisible('tabs');
   });
+
+  // Verifies 1 of 2 fixes for https://github.com/ionic-team/ionic-framework/issues/22519
+  it('should not create a new tabs instance when switching between tabbed and non-tabbed contexts - new tabs setup', () => {
+    cy.visit('http://localhost:8080/tabs-new/tab1');
+
+    cy.routerPush('/');
+    cy.ionPageHidden('tabs');
+    cy.ionPageVisible('home');
+
+    cy.routerPush('/tabs-new/tab2');
+    cy.ionPageHidden('tab1');
+
+    cy.ionPageHidden('home');
+
+    cy.ionPageVisible('tab2');
+    cy.ionPageVisible('tabs');
+  });
 })
 
 describe('Tabs - Swipe to Go Back', () => {
diff --git a/packages/vue/test-app/tests/unit/tab-bar.spec.ts b/packages/vue/test-app/tests/unit/tab-bar.spec.ts
index 67a60a87c3c..38b99eef457 100644
--- a/packages/vue/test-app/tests/unit/tab-bar.spec.ts
+++ b/packages/vue/test-app/tests/unit/tab-bar.spec.ts
@@ -68,7 +68,8 @@ describe('ion-tab-bar', () => {
     });
 
     const innerHTML = wrapper.find('ion-tabs').html();
-    expect(innerHTML).toContain(`<div class="tabs-inner" style="position: relative; flex: 1; contain: layout size style;"><ion-router-outlet></ion-router-outlet></div><ion-tab-bar slot="bottom"></ion-tab-bar>`);
+    // TODO: Remove tabs="true" in Ionic Vue v6.0
+    expect(innerHTML).toContain(`<div class="tabs-inner" style="position: relative; flex: 1; contain: layout size style;"><ion-router-outlet tabs="true"></ion-router-outlet></div><ion-tab-bar slot="bottom"></ion-tab-bar>`);
 
   });
 
@@ -100,7 +101,8 @@ describe('ion-tab-bar', () => {
     });
 
     const innerHTML = wrapper.find('ion-tabs').html();
-    expect(innerHTML).toContain(`<div class="tabs-inner" style="position: relative; flex: 1; contain: layout size style;"><ion-router-outlet></ion-router-outlet></div><ion-tab-bar></ion-tab-bar></ion-tabs>`)
+    // TODO: Remove tabs="true" in Ionic Vue v6.0
+    expect(innerHTML).toContain(`<div class="tabs-inner" style="position: relative; flex: 1; contain: layout size style;"><ion-router-outlet tabs="true"></ion-router-outlet></div><ion-tab-bar></ion-tab-bar></ion-tabs>`)
   });
 
   // Verifies the fix for https://github.com/ionic-team/ionic-framework/issues/22642

From 908c1d89b2d85b4ee9d4c7daef1c09a92f024f0c Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Thu, 21 Jan 2021 16:36:24 -0500
Subject: [PATCH 4/5] add tabs back

---
 packages/vue/src/components/IonTabs.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue/src/components/IonTabs.ts b/packages/vue/src/components/IonTabs.ts
index c3bf0d706bc..e292d530354 100644
--- a/packages/vue/src/components/IonTabs.ts
+++ b/packages/vue/src/components/IonTabs.ts
@@ -19,7 +19,7 @@ export const IonTabs = defineComponent({
             'contain': 'layout size style'
         }
       }, [
-        h(IonRouterOutlet)
+        h(IonRouterOutlet, { tabs: true })
       ])
     ];
 

From f7a3c1d199047a434b4b33eb5afb14e98c094eed Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Thu, 21 Jan 2021 17:32:02 -0500
Subject: [PATCH 5/5] add ?

---
 packages/vue/src/components/IonRouterOutlet.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue/src/components/IonRouterOutlet.ts b/packages/vue/src/components/IonRouterOutlet.ts
index c56b268f3ec..7fdbb2bd9b6 100644
--- a/packages/vue/src/components/IonRouterOutlet.ts
+++ b/packages/vue/src/components/IonRouterOutlet.ts
@@ -24,7 +24,7 @@ export const IonRouterOutlet = defineComponent({
     let usingDeprecatedRouteSetup = false;
 
     // TODO: Remove in Ionic Vue v6.0
-    if (attrs.tabs && route.matched[depth].children.length > 0) {
+    if (attrs.tabs && route.matched[depth]?.children?.length > 0) {
       console.warn('[@ionic/vue Deprecation]: Your child routes are nested inside of each tab in your routing config. This format will not be supported in Ionic Vue v6.0. Instead, write your child routes as sibling routes. See https://ionicframework.com/docs/vue/navigation#child-routes-within-tabs for more information.');
       usingDeprecatedRouteSetup = true;
     }