Why can't go back page after twice back to index?

Question

I'm using Cordova + Framework 7

• I have 3 page : index , page1 , page2
• When i back to index like this page2 -> page1 -> index, i can't press go page1 button in index.html. I must reload index page, the go page1 button so working.

routes.js

{
    path: '/page1/',
    async: function (routeTo, routeFrom, resolve, reject) {
        axios.get('').then(response => {
            var data = response.data;
            resolve({
                componentUrl: './pages/page1.html'
            }, {
                context: {
                    data: data,
                }
            });
        })
    }
}, {
    path: '/page2/:id',
    async: function (routeTo, routeFrom, resolve, reject) {
        axios.get('' + id).then(function (response) {
            var data = response.data;
            resolve({
                componentUrl: './pages/page2.html'
            }, {
                context: {
                    data: data
                }
            });
        })

    }
}

Back button in page1, page2

<a href="#" class="back link" data-force="true">
    <img src="img/icon-back.png" alt="">
</a>

Button go to page1 in index.html

.html

<a href="#" class="button button-raised button-fill" id="go-page1">go page1</a>

.js

$$('#go-page1').on('click', function () {
    app.views.main.router.navigate('/page1/');

}

Button go to page2 in page1

{{#each data}}
<div class="col">
    <div class="card demo-card-header-pic">
        <a href="/page2/{{id}}">{{name}}</a>
    </div>
</div>
{{/each}}

Answer 1

you can fix that by one from these solution:

1)

$$('#go-page1').on('click', function () {
    app.views.main.router.navigate('/page1/', {reloadCurrent: true});

}

2) or in html link

<a class="back" data-ignore-cache="true" data-force="true">back</a>

3) ignore cache/history or refresh prev page by reloadPrevious like this:

mainView.router.back({url: 'index.html', force: true, ignoreCache: true,reload: true});