fix(vue): correctly render child pages in tabs (#22141)

packages/vue-router/src/viewStacks.ts

@@ -6,6 +6,14 @@ import {  RouteInfo,
 
 export const createViewStacks = () => {
   let viewStacks: ViewStacks = {};
+  const tabsPrefixes = new Set();
+
+  const addTabsPrefix = (prefix: string) => tabsPrefixes.add(prefix);
+  const hasTabsPrefix = (path: string) => {
+    const values = Array.from(tabsPrefixes.values());
+    const hasPrefix = values.find((v: string) => path.includes(v));
+    return hasPrefix !== undefined;
+  }
 
   const getViewStack = (outletId: number) => {
     return viewStacks[outletId];
@@ -92,6 +100,8 @@ export const createViewStacks = () => {
   }
 
   return {
+    addTabsPrefix,
+    hasTabsPrefix,
     findViewItemByRouteInfo,
     findLeavingViewItemByRouteInfo,
     createViewItem,

packages/vue/src/components/IonRouterOutlet.ts

@@ -16,13 +16,27 @@ import { fireLifecycle, generateId, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LI
 let viewDepthKey: InjectionKey<0> = Symbol(0);
 export const IonRouterOutlet = defineComponent({
   name: 'IonRouterOutlet',
-  setup() {
+  setup(_, { attrs }) {
     const vueRouter = useRouter();
     const route = useRoute();
     const depth = inject(viewDepthKey, 0);
 
     // TODO types
-    const matchedRouteRef: any = computed(() => route.matched[depth]);
+    let tabsPrefix: string | undefined;
+    const matchedRouteRef: any = computed(() => {
+      const matchedRoute = route.matched[depth];
+
+      if (attrs.tabs && !tabsPrefix) {
+          tabsPrefix = route.matched[0].path;
+          viewStacks.addTabsPrefix(tabsPrefix);
+      }
+
+      if (matchedRoute && attrs.tabs && route.matched[depth + 1]) {
+        return route.matched[route.matched.length - 1];
+      }
+
+      return matchedRoute;
+    });
 
     provide(viewDepthKey, depth + 1)
 
@@ -205,6 +219,10 @@ export const IonRouterOutlet = defineComponent({
       }
 
       const currentRoute = ionRouter.getCurrentRouteInfo();
+      const hasTabsPrefix = viewStacks.hasTabsPrefix(currentRoute.pathname)
+      const isLastPathTabs = viewStacks.hasTabsPrefix(currentRoute.lastPathname);
+      if (hasTabsPrefix && isLastPathTabs && !attrs.tabs) { return; }
+
       let enteringViewItem = viewStacks.findViewItemByRouteInfo(currentRoute, id);
 
       if (!enteringViewItem) {