I will detail what I am seeing, as my symptoms appear to be different from the problems outlined in the solutions above.
To start, this problem does not occur when:
I only have two levels of navigation (e.g. home, other page)
I can always return to the home page when I click a Back link on another page
This problem does occur when:
I have more than 2 levels of navigation
I navigate from the home page to another page
I navigate from the other page to another subpage
I navigate back from the subpage to the other page using the Back link
Now clicking on the back link on the other page will not take me to the home page
Also,
If I have 5 levels of navigation for example,
And I navigate from Home --> Page A --> Page B --> Page C --> Page D
Then I can navigate successfully back from Page D --> Page C --> Page B --> Page A
But I cannot navigate from Page A --> Home
To clarify:
If I have more than 2 levels of navigation,
And I navigate from the home page to another page
But I do not navigate forward elsewhere
Then clicking on the Back link works and I can navigate from the other page back to the home page
Also, calling f7.router.back() successfully works too in this specific situation
Hence, I cannot navigate back to my home view from a another page IFF I have navigated forward to any other subpage from the other page.
What I am wondering is if this is a bug or if I should check my code to see if I set something up wrong.
I am using Framework7-Vue v3.
When I look at the DOM, I noticed that when I navigate forward, the previous page gets encapsulated by a <div class="page page-previous"> element within the <div class="view view-main"> element, and the current page is encapsulated by a <div class="page page-current"> element. In all other cases, the <div class="page page-previous"> element’s contents become the contents of the <div class="page page-current"> element.
However, when I navigate back to the page that is just one level above the home screen, there is no <div class="page page-previous"> element. This is probably the real issue. I do not know why this is the case, because again, when I only navigate to another page from the home page, the previous page div is there present.
Also, when I run f7.router.previousRoute or f7.router.currentRoute no matter where I am, I always get {} as the result. f7.router.history does not exist as a property on f7.router.
@nolimits4web OK - I’ll just give you temporary credentials to the app I created on the web, but I have to create the credentials first. Since it is Framework7-Vue, I am doubtful I could recreate it on JSFiddle, since the transpiled backend is so substantial. No worries, I’ll just notify this thread when I have temporary credentials.
To add some information to the post above:
My app is built with webpack. I ran vue init webpack app (where app refers to the directory) to initialize my app.
As a result, my app comes with an index.html and a src\main.js.
My main view is not defined as a component, but rather just embedded within index.html. As a result, it doesn’t have an entry in the Framework7-Vue router, whereas all other pages do.
My app is initialized in src\main.js and attaches to an element in index.html, where the main view is.
Maybe I should open a new topic, but we are experiencing almost the same problem as TS.
The only difference is that on navigating back, we only have the <div class="page page-previous"> element in the DOM and not the page-current div. The result is that the app “freezes” because there is no current-page.
Also, the app stops after the “pageReinit” event. Normally, after the pageReinit multiple events are fired, but in this case it just stops.
We are using V5 (latest version) in combination with Vue and TypeScript. The problem only occurs if we try to navigate back after we have navigated 2 or more pages from the home.