[SOLVED] Back link does not work after more than one level of nagivation

Questions
1

Before I start, I will admit that there are several questions similar to mine:

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.

1 Like
2

There could be both bug and issue on your side. Would be good to see minimal reproduction example (better on JSFiddle) where i can check it

3

@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:

  1. My app is built with webpack. I ran vue init webpack app (where app refers to the directory) to initialize my app.
  2. As a result, my app comes with an index.html and a src\main.js.
  3. 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.
  4. My app is initialized in src\main.js and attaches to an element in index.html, where the main view is.
4

That is the issue:

It must be defined as component. Otherwise Router don’t know where it should load home page from

1 Like
5

Wow thanks @nolimits4web, that was in fact what my problem was.

Luckily it wasn’t too hard to extract the code from index.html and src/main.js into its own Vue component.

The problem has been solved by

  • extracting the contents of index.html and src/main.js into a Vue component that I called home.vue.
  • adding an entry in the router for the home.vue component:
import Home from './component/home.vue' // I keep my components in the component directory
...
routes: [
...
{
    path: '/home/',
    component: Home
}
  • in the Vue app declaration in src/main.js, in the mounted() method (where I was initializing the home view), I now have only a few lines:
var app = new Vue({
...
    mounted() {
        this.$f7ready((f7) => {
            f7.router.navigate('/home/', { animate: false });
        });
    }
...
});

The app now appears to load identically to how it loaded before, but now I do not have my multiple level back link navigation issue.

1 Like
6

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.

@nolimits4web any clue on this one?

7
8

Dear God,

I also met this problem.

Menu:
level 1 > level 2 > level 3

  1. When back from level 3 subpage to level 2 page.
  2. The page content has shown as level 1, but the url path is level 2(correct). I’m unable to click the list button the UI(Level 1 content).
  3. The content could should as a correct page on reload the content.(click reload button on browser).

Environment:

"dom7": "^3.0.0",
"framework7": "^6.0.19",
"framework7-vue": "^6.0.19",
"skeleton-elements": "^3.3.0",
"vue": "^3.0.11"

maxOS Big Sur: 11.3.1

1 Like