bug: (vue) Opening route to view X.vue also executes setup for Y.vue

[brease-colin]

Prerequisites

• 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

When I open a link that is routed to X.vue, go back to previous page (home) and then open view Y.vue, the setup function of view X is run a second time. I verified this by a simple log message. Not only does this feel like a waste, it also resulted in weird behavior on our side when logging view access and assuming the url's id being set when on the page.

Expected Behavior

The setup function of a view should only be called when that view is actually being visited.

Steps to Reproduce

1. Run the code reproduction URL's code with npm run serve
2. Open http://localhost:8090
3. Click a random message in the list, which is mapped (routed) to view ViewMessage.vue
4. Check browser console, it should display: ViewMessage Setup
5. Click the back button in the app
6. Click the Settings button in the top right, which is mapped (routed) to view Settings.vue
7. Check browser console, it again displays: ViewMessage Setup

Code Reproduction URL

https://github.com/brease-colin/vue-router-view-setup-issue

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module
'@capacitor/ios/package'

   Require stack:
   - C:\Users\CB\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\CB\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js        
   - C:\Users\CB\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\CB\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module
'@capacitor/android/package'

   Require stack:
   - C:\Users\CB\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js  
   - C:\Users\CB\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\CB\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\CB\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 6.17.1 (C:\Users\CB\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/vue 5.8.4

Capacitor:

Capacitor CLI : 3.2.5
@capacitor/android : not installed
@capacitor/core : 3.2.5
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.3
native-run : 1.5.0

System:

NodeJS : v14.15.0 (C:\Program Files\nodejs\node.exe)
npm : 6.14.8
OS : Windows 10

Additional Information

The project we first noticed this used version 5.4 of ionic vue and router, the reproduction url uses the latest version (5.8.4). I tested this on Chrome 94, but also noticed this on device (Android) with the same webview version.

Also, I'm not sure if this is Vue specific or in all Ionic versions.

[liamdebeasi]

Thanks! This was already fixed in #24056, and a fix should be available in the next release of Ionic.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.