bug: ionic vue cannot destroy and re-create tabs #22255
Description
Bug Report
Ionic version:
[ ] 4.x
[x] 5.x
Current behavior:
When I have an initial view like a login page. Then I navigate to a page with tabs. It work fine, when I hit the back button and then click on the link to view the tab bar again it fails.
Expected behavior:
Should load the page again with the tabBar
Steps to reproduce:
- Load first page.
- Click link to go to view with tab bar
- Hit the back button
- Hit the link again to go to the view with the tab bar
Related code:
I have a sample app here.
https://github.com/scottix/vue-pretab
Console log of error
Uncaught (in promise) TypeError: Cannot set property 'selectedTab' of null
at Proxy.checkActiveTab (index.js?8a30:1007)
at eval (router.js?66ab:157)
at Array.forEach (<anonymous>)
at handleHistoryChange (router.js?66ab:157)
at eval (router.js?66ab:5)
at eval (vue-router.esm-bundler.js?6c02:1830)
at new Promise (<anonymous>)
at eval (vue-router.esm-bundler.js?6c02:1804)
at eval (vue-router.esm-bundler.js?6c02:2725)
checkActiveTab @ index.js?8a30:1007
eval @ router.js?66ab:157
handleHistoryChange @ router.js?66ab:157
eval @ router.js?66ab:5
eval @ vue-router.esm-bundler.js?6c02:1830
eval @ vue-router.esm-bundler.js?6c02:1804
eval @ vue-router.esm-bundler.js?6c02:2725
Promise.then (async)
pushWithRedirect @ vue-router.esm-bundler.js?6c02:2398
push @ vue-router.esm-bundler.js?6c02:2338
navigate @ router.js?66ab:168
handleClick @ index.js?8a30:63
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163
invoker @ runtime-dom.esm-bundler.js?830f:292
Other information:
Seems like it doesn't get loaded again properly.
Ionic info:
Ionic:
Ionic CLI : 6.11.8-testing.0 (/usr/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 0.5.2
System:
NodeJS : v12.18.4 (/usr/bin/node)
npm : 6.14.6
OS : Linux 5.4