diff --git a/packages/vue-router/src/viewStacks.ts b/packages/vue-router/src/viewStacks.ts index 6563a3abd8..7479b2ebfa 100644 --- a/packages/vue-router/src/viewStacks.ts +++ b/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, diff --git a/packages/vue/src/components/IonRouterOutlet.ts b/packages/vue/src/components/IonRouterOutlet.ts index a628dc94c0..cea80cc3d1 100644 --- a/packages/vue/src/components/IonRouterOutlet.ts +++ b/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) {