Router doesn't follow history

[Simone4e]

• Framework7 version: 7.0.7
• Platform and Target: Browser + Cordova
• Live Link or JSFiddle: https://jsfiddle.net/r135p4ws/

Describe the bug

Router back seems like doesn't follow the history although there is the history: false option on the middle page (see fiddle) Scheme of page: About -> Edit Page (history: false) -> newPage

To Reproduce

Steps to reproduce the behavior (fiddle):

1. Go to page about
2. Click on button and go to edit page
3. Click on button and go to new page
4. Now try to go back you will see that it does not return to the first page

Expected behavior

It should skip the ignored page with the history: false option and go directly to the previous page (as per history). page -> editPage -> newPage page <- newPage

Actual Behavior

The page does not follow history. page -> editPage (history: false) -> newPage page <- editPage(the page doesn't exist in history but is loaded) <- newPage

Additional context

In the fiddle you will also see the history debug with the routeChanged event

[pablorodriguesnunes]

Please try to use clearPreviousHistory: true instead of history: false

[Simone4e]

Please try to use clearPreviousHistory: true instead of history: false

Exactly as the word "clear" says, instead of not entering the history page, you insert the page and delete the previous one, completely bugging the history. You can see the result described directly in the fiddle. I add a small scheme into Expected/Actual Behavior for better understand

[pablorodriguesnunes]

in that case you can use browserHistory: false

whether the page should be saved in browser state. In case you are using browserHistory, then you can pass here false to prevent route getting in browser history

Route Options

[Simone4e]

in that case you can use browserHistory: false

That doesn't work too, please before answer try yourself with fiddle. The browserHistory has nothing to do with the router back In case you are using browserHistory <- is not my case :)

[peitschie]

Interesting... I've generally used reloadCurrent when transitioning from the edit page => new page for achieving this effect.

E.g.,

<a href="edit/" data-reload-current="true">click to go edit page</a>

A quick dig, and it seems like when the previous page is kept in DOM, the router is ignored (which does feel like a bug to me!)

If you want a workaround, you can add preloadPreviousPage: false to your view initialisation, so the previous page is cleaned up. This will fix the routing!

var app = new Framework7({
  root: '#app',
  theme: 'auto',
  view: {
    // Ensures previous page get removed from the DOM
    preloadPreviousPage: false,
  },

[peitschie]

Oh, p.s., that Fiddle is using v4 of the framework 😅

Would suggest using these links instead:

• https://unpkg.com/[email protected]/framework7-bundle.js
• https://unpkg.com/[email protected]/framework7-bundle.css

[Simone4e]

Oh, p.s., that Fiddle is using v4 of the framework 😅

Ops i changed now fiddle (i suggest to change fiddle in example page @nolimits4web )

---

For the reloadCurrent: true suggest, Seems to work, but break the animation of page transition.

---

For the preloadPreviousPage: false suggest, This method does not work at all, in practice being that the real system I am using has 3/4 more levels than the simple example I have shown instead of skipping the edit / add page it goes to the previous two pages, however history should work it seems to me a major bug. In the fiddle instead you will see that going back you will get to About but it will not go to the home.

[peitschie]

Right.

What you've effectively hit here is that the page is needed during animation only, but if history: false, it should be removed from the DOM after animation is complete.

[peitschie]

At a glance, it seems like something as simple as this in navigate.js

I don't have an easy way to build and check though 🙈

[Simone4e]

Right.

What you've effectively hit here is that the page is needed during animation only, but if history: false, it should be removed from the DOM after animation is complete.

For the reloadCurrent: true suggest, I have to correct myself, unfortunately it doesn't work. I'll give you some context: In almost every level you can create / edit another level and when you have created it for example you can go to the next level directly, if I create and go to the next level 3 times going back it completely loses the page history and the router back it blocks.

[Simone4e]

At a glance, it seems like something as simple as this in navigate.js

Seems like the solution, hope @nolimits4web have time for that.

[Simone4e]

@peitschie For now i resolve the problem use your tip reloadCurrent for change page from editPage -> newPage and for fix router.back() history i used a custom function from another bug report:

app.goBackReload = function (history) {
    app.views.main.router.back({
        url: history[history.length - 2],
        force: true,
        ignoreCache: true
    });
};

Seems like router.back with ignoreCache without specify the url doesn't re-load the page instead use cache