javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 10:41:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Liam DeBeasi
2020-09-22 14:41:26 -04:00
committed by GitHub
parent 6ac6810148
commit 7e449a1ca6
2 changed files with 30 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/vue-router/src/viewStacks.ts
View File

@ -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,

22
packages/vue/src/components/IonRouterOutlet.ts
View File

@ -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) {