Hello, I am getting an unexpected result with the back button when trying to implement routable tabs with unloadTabContet=false.
Using version 3.6.5
Expected behavior:
- Main page -> Link to Tab page
- Tab page loads.
- switch from tab1 to tab2 and return again to tab1.
- Back button should return to main page as routable tabs are not altering history.
Current behavior:
- Main page -> Link to Tab page
- Tab page loads.
- switch from tab1 to tab2 and return again to tab1.
- Back button change the url but Tab page keeps open.
Need more details, better example or JSFiddle, as i can’t replicate the issue
Thank’s for your reply Vladimir, I have identified from my test that the router problem happens when I use this combination, Tabs [routable, swipeable] and Async in the routes of the tabs as the next code show.
{
path: '/tabs/',
tabs: [
{
path: '/',
id: 'tab-1',
async (routeTo, routeFrom, resolve, reject) {
const vueComponent = () => import('./pages/tab1.vue')
vueComponent().then(vc => resolve({ component: vc.default }))
},
},
{
path: '/history/',
id: 'tab-2',
async (routeTo, routeFrom, resolve, reject) {
const vueComponent = () => import('./pages/tab2.vue')
vueComponent().then(vc => resolve({ component: vc.default }))
},
},
The error of back in history happens after swiping between tabs and then pressing back.
If instead of Async I put the components imported before, it works as expected.
The code is here and the live demo is here.
@nolimits4web should I open an issue in the repository since I could replicate the problem?
Yes, would be great if you can open issue on GitHub