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


#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.


#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


#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.