Go back from multiple pages

Questions
1

I have multiple views in tabs and have set routes on a view to different pages. When I open a page and go back everything works fine. But when I go to another page from the loaded page and then go back my searchbar from the root view is shown and the root view isn’t loaded anymore.

this is my route:

var recordsView = f7app.views.create('#view-records', {
  url: '/',
  routes: [
			{
				name: 'leaderboard-all',
				path: '/leaderboard-all/:type/:id',
				url: './pages/leaderboard-all.html',
			},
			{
				name: 'add-custom-record',
				path: '/add-custom-record/:type/:cat/:templ/',
				url: './pages/add-custom-record.html',
			},
			{
				name: 'records-overview',
				path: '/records-overview/:type/:id',
				url: './pages/records-overview.html',
			},
			{
				name: 'records-calculator',
				path: '/records-calculator/:type/:id',
				url: './pages/records-calculator.html',
			}
		]
});

I open records-overview within view-records and go back and this works fine. But when I open records-overview and from that go to records-calculator and then go back to view-records this isn’t loaded anymore.

2

Explain, what does it mean?

3

The root of the view are skeleton blocks which are replaced with content after my Ajax post succeeds.

When I go back from multiple pages to this Root view the skeleton blocks are back.

4

I noticed the view can only hold two pages. When the second page is loaded in the view the root elements are removed. In the docs I found I need to set stackPages to true which by default is false. This solved my problem.

stackPages	boolean	false	If enabled then all previous pages in navigation chain will not be removed from DOM when you navigate deeper and deeper. It could be useful, for example, if you have some Form from 5 steps (5 pages) and when you are on last 5th page you need access to form that was on 1st page.