Why does home content disappear in tab views from the third level of navigation

Questions
1

I have searched the whole forum for the solution about but i cant quite find an answer.
I have found guys with the same issue but the solutions cant quite work for me and others are not solved.
The first was using stackPages: true in my initialized view parameters but this is now removed from the latest version
The second was forcing navigation to the home page from the third page level, I navigate well to the home but still the content disappears
Something like this;

<a href="/" data-force="true" data-ignore-cache="true" class="back">
     <i class="icon material-icons">arrow_back</i>
</a>

Here are my tabbed views

<div id="app">
    <div class="views tabs safe-areas">
         <div class="toolbar toolbar-bottom tabbar-icons">
              <!-- tool bar here --- >
         </div>
         <div id="movies" class="view view-main tab tab-active">
           <div class="page" data-name="movies_page">
                <div class="page-content infinite-scroll-content" id="movie_scroll">
                </div>
           </div>
         </div>
          <div id="shows" class="view tab">
           <div class="page" data-name="shows_page">
                <div class="page-content infinite-scroll-content" id="shows_scroll">
                </div>
           </div>
         </div>
    </div>

here is my initialization code, they are methods in my class that i call some where

movies() {
        this.app.views.create('#mymovies', {
            // on page init i ran my methods to render data for this view
            on: {
                pageInit: (event) => {
                    // since this event was firing everytime i loaded or navigated to page in this view , i added a conditional statement to ensure that the rendering logic works only the first time i load the main view page
                    if (event.name = "my-view-1-page-name") {
                        // so i added my logic to render everything here page init for the view main
                    }
                }
            }
        })
    }
    // like wise for view 2 but fir view 2  i wanted it to initialize once it becomes visible so i added the "initRouterOnTabShow" view parameter
    shows() {
        this.app.views.create('#myshows', {
            initRouterOnTabShow: true,
            on: {
                // added here page init logic just like the view 1
            }
        })
    }

here are my routes

routes: [
    // my routes
    {
      path: "/",
      url: "./index.html",
      options: {
        history: true
      },
    },
    {
      path: '/movies/',
      pageName: 'movies_page',
    },
    {
      path: "/discover/",
      url: "./pages/discover.html",
    },
    // movie details pages
    {
      path: '/movie_details/',
      componentUrl: './pages/movie_details.html',
      options: {
        transition: 'f7-dive',
      },
    },
    {
      path: '/movie_details_sub/',
      componentUrl: './pages/movie_details_sub.html',
      options: {
        // reloadPrevious: true,
        // history: false,
        transition: 'f7-dive',
        // clearPreviousHistory: true,
      },
    },
    // serie details pages
    {
      path: '/serie_details/',
      componentUrl: './pages/serie_details.html',
      options: {
        transition: 'f7-dive',
      },
    },
    {
      path: '/more/',
      componentUrl: './pages/more.html',
      options: {
        history: true,
        transition: 'f7-dive',
      },
    }
  ],

I think guys that is it please any one even if you have least idea i appreciate it cause am stuck for almost a month i have replied to same topics but no answer :sob::sob:until i have decided to create my own topic
Any one plizz :pray::pray::pray::pray::pray:
Thanks in advance and feel free to ask for more details about the code nice tym