bug: vue re-mounts intermediary views when not needed

[kabzko]

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

I have IonMenu with a list of routes.

When I push a page(Orders) for the first time all is well.

and again when I push to a new page for the second time it renders the new page(Products) and the old page(Orders).

It affects my methods that I created for both pages. It calls all the created methods from both page.

Here's some video that I recorded
https://user-images.githubusercontent.com/41864097/132933264-769c352c-49ba-4174-9d0c-44719469d752.mp4

Expected Behavior

Old page must not be rendered again when you push to a new page

Steps to Reproduce

Just navigate from menu and check the console which I console log only text for testing.

Code Reproduction URL

https://github.com/kabzko/testroute

Ionic Info

Ionic:

Ionic CLI : 6.17.1

Utility:

cordova-res : 0.15.3
native-run : not installed globally

System:

NodeJS : v14.17.0
npm : 6.14.13
OS : Windows 10

Additional Information

No response

[whitersun]

For more detail issue, please watch it.
https://drive.google.com/file/d/1gNdeJHYdGitj_ApHNeUKQFXiwG8hJTRe/view?usp=sharing

Description:
When in home page router to Products, the Products page will render two components included the Order view page.
But if we reload in child component like the Product page, then return home page. And router again to order then return the home router to products will no render also to components anymore.

[UrosPavlovic]

Same as for me. Currently in my new app, i have only 3 pages, home, login and register. Switching from Login to Register, vice versa, or from Home to either of them renders 2 views at same time. I can also post a video if needed.

Relevant deps:
"@ionic/vue": "^5.4.0",
"@ionic/vue-router": "^5.4.0",
"vue": "^3.2.1",
"vue-router": "^4.0.0-0",

[liamdebeasi]

Thanks for the issue. Looks like this line is the culprit: https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/src/components/IonRouterOutlet.ts#L292 We probably need to be more specific about which views we remount by taking into account the delta value that the app was navigated with. I will look into a fix. As a temporary workaround, you can downgrade to v5.6.13.

[whitersun]

Hi @liamdebeasi, I am afraid of if I downgrade to version 5.6.13 will influence the router.replace that got transition not remove from the prev view page rendered like the last issue of:
https://forum.ionicframework.com/t/page-transition-with-router-replace/214614/8

this was fixed that just not showing errors anymore. But that still had a router.replace problem, transition gets an incorrect view.
#22654

[whitersun]

Thanks for @liamdebeasi to point the problem, I finally solved this bug by changing abit code from

ionic-framework/packages/vue-router/src/viewStacks.ts

Line 223 in 25eb8cd

const mountIntermediaryViews = (outletId: number, enteringViewItem: ViewItem, leavingViewItem: ViewItem) => {

and below this link is my video record solution.
https://drive.google.com/file/d/1QCvTexQ5ZqYlSwzaE4aHbfXc6TDzuJAA/view?usp=sharing

Bug code:

  const mountIntermediaryViews = (outletId: number, enteringViewItem: ViewItem, leavingViewItem: ViewItem) => {
    const viewStack = viewStacks[outletId];
    if (!viewStack) return;

    const { enteringIndex: endIndex, leavingIndex: startIndex } = findViewIndex(viewStack, enteringViewItem, leavingViewItem);

    for (let i = startIndex + 1; i < endIndex; i++) {
      viewStack[i].mount = true;
    }
  }

fixed code:

  const mountIntermediaryViews = (outletId: number, enteringViewItem: ViewItem, leavingViewItem: ViewItem) => {
    const viewStack = viewStacks[outletId];
    if (!viewStack) return;

    const { enteringIndex: endIndex, leavingIndex: startIndex } = findViewIndex(viewStack, enteringViewItem, leavingViewItem);

    for (let i = startIndex; i < endIndex; i++) {
      return viewStack[i].mount = true;
    }
  }

or

  const mountIntermediaryViews = (outletId: number, enteringViewItem: ViewItem, leavingViewItem: ViewItem) => {
    const viewStack = viewStacks[outletId];
    if (!viewStack) return;

    const { enteringIndex: endIndex, leavingIndex: startIndex } = findViewIndex(viewStack, enteringViewItem, leavingViewItem);

    for (let i = startIndex + 1; i < endIndex; i++) {
      return viewStack[i - 1].mount = true;
    }
  }