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

fix(vue): mount correct views when navigating (#24056)

Browse Source 
resolves #23914
This commit is contained in:
Liam DeBeasi
2021-10-14 11:28:36 -04:00
committed by GitHub
parent a09d7d4ab6
commit 24659a527a
6 changed files with 125 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/vue-router/src/router.ts
View File

@ -262,6 +262,7 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) =>
}
routeInfo.position = currentHistoryPosition;
routeInfo.delta = delta;
const historySize = locationHistory.size();
const historyDiff = currentHistoryPosition - initialHistoryPosition;

1
packages/vue-router/src/types.ts
View File

@ -27,6 +27,7 @@ export interface RouteInfo {
pushedByRoute?: string;
tab?: string;
position?: number;
delta?: number;
}
export interface RouteParams {

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

@ -164,34 +164,6 @@ export const createViewStacks = (router: Router) => {
return [];
}
/**
* Given a view stack and entering/leaving views,
* determine the position of each item in the stack.
* This is useful for removing/adding views in between
* the view items when navigating using router.go.
* Use this method instead of doing an `Array.findIndex`
* for both view items.
*/
const findViewIndex = (viewStack: ViewItem[], enteringViewItem: ViewItem, leavingViewItem: ViewItem) => {
let enteringIndex = -1;
let leavingIndex = -1;
for (let i = 0; i <= viewStack.length - 1; i++) {
const viewItem = viewStack[i];
if (viewItem === enteringViewItem) {
enteringIndex = i;
} else if (viewItem === leavingViewItem) {
leavingIndex = i;
}
if (enteringIndex > -1 && leavingIndex > -1) {
break;
}
}
return { enteringIndex, leavingIndex };
}
/**
* When navigating backwards, we need to clean up and
* leaving pages so that they are re-created if
@ -199,13 +171,13 @@ export const createViewStacks = (router: Router) => {
* important when using router.go and stepping back
* multiple pages at a time.
*/
const unmountLeavingViews = (outletId: number, enteringViewItem: ViewItem, leavingViewItem: ViewItem) => {
const unmountLeavingViews = (outletId: number, viewItem: ViewItem, delta: number = 1) => {
const viewStack = viewStacks[outletId];
if (!viewStack) return;
const { enteringIndex: startIndex, leavingIndex: endIndex } = findViewIndex(viewStack, enteringViewItem, leavingViewItem);
const startIndex = viewStack.findIndex(v => v === viewItem);
for (let i = startIndex + 1; i < endIndex; i++) {
for (let i = startIndex + 1; i < startIndex - delta; i++) {
const viewItem = viewStack[i];
viewItem.mount = false;
viewItem.ionPageElement = undefined;
@ -219,14 +191,26 @@ export const createViewStacks = (router: Router) => {
* developers to step forward over multiple views.
* The intermediary views need to be remounted so that
* swipe to go back works properly.
* We need to account for the delta value here too because
* we do not want to remount an unrelated view.
* Example:
* /home --> /page2 --> router.back() --> /page3
* Going to /page3 would remount /page2 since we do
* not prune /page2 from the stack. However, /page2
* needs to remain in the stack.
* Example:
* /home --> /page2 --> /page3 --> router.go(-2) --> router.go(2)
* We would end up on /page3, but users need to be able to swipe
* to go back to /page2 and /home, so we need both pages mounted
* in the DOM.
*/
const mountIntermediaryViews = (outletId: number, enteringViewItem: ViewItem, leavingViewItem: ViewItem) => {
const mountIntermediaryViews = (outletId: number, viewItem: ViewItem, delta: number = 1) => {
const viewStack = viewStacks[outletId];
if (!viewStack) return;
const { enteringIndex: endIndex, leavingIndex: startIndex } = findViewIndex(viewStack, enteringViewItem, leavingViewItem);
const startIndex = viewStack.findIndex(v => v === viewItem);
for (let i = startIndex + 1; i < endIndex; i++) {
for (let i = startIndex + 1; i < startIndex + delta; i++) {
viewStack[i].mount = true;
}
}