How to Call New Route With Same Page In Framework7

I have a problem using routes in Framework7. I have an app with 4 products in the product page, so if i click product001 from 4 products, then the page will display the details of product001 with showing 3 other products in the bottom of product01 description, oke… then if I click product002 in the product001 detail page then the page will display the details of the product002. I have tried several ways, but the page does not display images for the second detail.
My code app.js :

var app = new Framework7({
  // App root element
  root: '#app',
  name: 'pagol.id',
  theme: 'auto',
  id: 'com.myapp.test',
  ignoreCache: true,
  precompileTemplates: true,
  template7Pages: true,
  // Enable swipe panel
  panel: {
    swipe: 'left',
  },
  // Add default routes
  routes: [
      {
        path: '/all-categories/',
        url: './all-categories/',
      },

      {
        path: '/categories-details/',
        url: './categories-details/',
      },

      {
        path: '/',
        url: '/',
        master: true,
        allowDuplicateUrls: true,

        detailRoutes: [
          {
            /* We need to specify detail route path from root */
            path: '/product-details/:id',
            async: function (routeTo, routeFrom, resolve, reject) {
                var id = routeTo.params.id;
                app.request.getJSON('json/product/' + id, function (data) {
                    resolve(
                        {
                            templateUrl:'product-details/' + id
                        },
                        {
                            context: { product:data }
                        }
                    );
                });
            },

            on: {
                pageInit: function(e, page){

                    var imgArray = [];
                    for(var i=0; i<page.route.context.product.images.length; i++){
                        var imgPath = "uploads/" + page.route.context.product.images[i];
                        var imgDiv = '<div class="swiper-slide"><div class="content"><div class="mask"></div><img style="height:250px; object-fit:cover" src="'+imgPath+'" alt=""></div></div>';

                        imgArray.push(imgDiv);
                    }

                    $('#display-img').html(imgArray);

                    var swiper = app.swiper.create('.swiper-container', {
                      speed: 1000,
                      slidesPerView: 'auto',
                      loopedSlides: page.route.context.product.images.length,
                      observer: true,
                    }); 

                    var imgArray = [];
                    for (var i = 0; i < page.route.context.product.seller_product.length; i++) {
                        var img = page.route.context.product.seller_product[i].images.split(",");
                        var imgPath = "uploads/" + img[0];
                        var imgDiv = '<div class="swiper-slide">'+
                                        '<div class="content content-shadow-product">'+
                                            '<a href="/product-details/'+ page.route.context.product.seller_product[i].id +'">'+
                                                '<img style="height:80px; object-fit:cover" src="'+imgPath+'" alt="">'+
                                            '</a>'+
                                            '<div class="text">'+
                                                '<a href="/product-details/'+ page.route.context.product.seller_product[i].id +'">'+
                                                    '<p class="title-product">'+
                                                        page.route.context.product.seller_product[i].name+
                                                    '</p>'+
                                                '</a>'+
                                                '<p class="price">Rp. '+
                                                    Intl.NumberFormat('de-DE').format(page.route.context.product.seller_product[i].price)+
                                                '</p>'+
                                            '</div>'+
                                        '</div>'+
                                     '</div>';

                        imgArray.push(imgDiv);
                    }

                    $('#latest-product').html(imgArray);

                    var imgArray = [];
                    for (var i = 0; i < page.route.context.product.category_product.length; i++) {
                        var img = page.route.context.product.category_product[i].images.split(",");
                        var imgPath = "uploads/" + img[0];
                        var imgDiv = '<div class="swiper-slide">'+
                                        '<div class="content content-shadow-product">'+
                                            '<a href="/product-details/'+ page.route.context.product.category_product[i].id +'">'+
                                                '<img style="height:80px; object-fit:cover" src="'+imgPath+'" alt="">'+
                                            '</a>'+
                                            '<div class="text">'+
                                                '<a href="/product-details/'+ page.route.context.product.category_product[i].id +'">'+
                                                    '<p class="title-product">'+
                                                        page.route.context.product.category_product[i].name+
                                                    '</p>'+
                                                '</a>'+
                                                '<p class="price">Rp. '+
                                                    Intl.NumberFormat('de-DE').format(page.route.context.product.category_product[i].price)+
                                                '</p>'+
                                            '</div>'+
                                        '</div>'+
                                     '</div>';

                        imgArray.push(imgDiv);
                    }

                    $('#recommended-product').html(imgArray);


                },
            }
          },
        ],
      },
      {
        path: '/all-reviews/',
        url: './all-reviews/',
      },

      {
        path: '/account-seller/',
        url: './account-seller/',
      },

      {
        path: '/account-buyer/',
        url: './account-buyer/',
      },

      {
        path: '/settings/',
        url: './settings/',
      },

      {
        path: '/edit-profile/',
        url: './edit-profile/',
      },

      {
        path: '/notification-settings/',
        url: './notification-settings/',
      },

      {
        path: '/faq/',
        url: './faq/',
      },

      {
        path: '/wishlist/',
        url: './wishlist/',
      },

      {
        path: '/transaction/',
        url: './transaction/',
      },

      {
        path: '/blog/',
        url: './blog/',
      },

      {
        path: '/blog-single/',
        url: './blog-single/',
      },

      {
        path: '/sign-in/',
        url: './sign-in/',
      },

      {
        path: '/sign-up/',
        url: './sign-up/',
      },

      {
        path: '/notification/',
        url: './notification/',
      },

      {
        path: '/checkout/',
        url: './checkout/',
      },

      {
        path: '/shipping-details/',
        url: './shipping-details/',
      },

      {
        path: '/shipping-options/',
        url: './shipping-options/',
      },

      {
        path: '/payment-method/',
        url: './payment-method/',
      },

      {
        path: '/email-settings/',
        url: './email-settings/',
      },

      {
        path: '/email-change-settings/',
        url: './email-change-settings/',
      },

      {
        path: '/password-settings/',
        url: './password-settings/',
      },

      {
        path: '/contact-seller/',
        url: './contact-seller/',
      },

      {
        path: '/tracking-order/',
        url: './tracking-order/',
      },

      {
        path: '/shipping-information/',
        url: './shipping-information/',
      },

      {
        path: '/order-history/',
        url: './order-history/',
      },

      {
        path: '/shopping-cart/',
        url: './shopping-cart/',
      },
    ],
  // ... other parameters
});

var mainView = app.views.create('.view-main');
var $ = Dom7;

my product detail code :

<div class="page" data-page="about">
    <div class="navbar navbar-page">
        <div class="navbar-inner sliding">
            <div class="left">
                <a href="#" class="link back">
                    <i class="fas fa-arrow-left"></i>
                </a>
            </div>
            <div class="right nav-product-detail">
                <a href="#"><i class="fas fa-share-alt"></i></a>
                <a href="#" @click="showToastBottom"><i class="fas fa-heart"></i></a>
                <a href="/shopping-cart/"><i class="fas fa-shopping-cart"></i></a>
            </div>
        </div>
    </div>
    <div class="page-content">
        <!-- product details -->
        <div class="product-details segments">
            <div class="container">
                <!-- slider product details -->
                <div class="slider-p-details">
                    <div data-pagination='{"el": ".swiper-pagination"}' data-space-between="10" class="swiper-container swiper-init swiper-container-horizontal">
                        <div class="swiper-pagination"></div>
                        <div class="swiper-wrapper" id="display-img"></div>
                </div>
            </div>
            <!-- end slider product details -->

            <!-- wrap content product details -->
            <div class="wrapper-content">
                <div class="wrap-title-product wrap-c-margin">
                    <h4 class="title"></h4>
                    <p class="price"></p>
                </div>
                <div class="wrap-info">
                <div class="section-title">
                    <h3>Keterangan</h3>
                </div>
                <div class="content">
                    <div class="text description">{{$route.context.product.description}}</div>
                </div>

                <!-- related products -->
                <div class="related-products segments no-pd-b">
                    <div class="section-title">
                        <h3>Jualan yang lain <a href="#" class="see-all-link">See All</a></h3>
                    </div>
                    <div data-speed="900" data-space-between="50"  class="swiper-container">
                        <div class="swiper-wrapper" id="latest-product"></div>
                    </div>
                </div>
                <!-- end related products -->
            </div>
            <!-- end wrap content product details -->
        </div>
        <!-- wrap store -->
        <div class="wrap-store">
            <div class="container">
                <div class="row">
                    <div class="col-120">
                        <div class="user-caption">
                            <img src="images/user-seller1.png" alt="">
                            <div class="title-name">
                                <h4>{{$route.context.product.store_name}}</h4>
                                <p class="date"><i class="fas fa-map-marker-alt"></i> {{$route.context.product.seller_address}}</p>
                                <p class="date"><i class="fas fa-phone-alt"></i> {{$route.context.product.seller_phone}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-120">
                        <div class="user-button">
                            <a href="#" class="button primary-button">WhatsApp</a>
                            <a href="/account-seller/" class="button secondary-button">Telepon</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end wrap store -->

        <!-- product review -->
        <div class="product-review segments">
            <div class="container">
                <div class="section-title">
                    <h3>Product Reviews</h3>
                </div>
                <div class="content">
                    <img src="images/user-buyer2.png" alt="">
                    <div class="text">
                        <h6>Rashaad</h6>
                        <ul class="rate-product">
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star-half-alt"></i></li>
                        </ul>
                        <p class="date">3 min ago</p>
                        <i class="fas fa-thumbs-up like-button"></i>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, explicabo.</p>
                    </div>
                </div>

                <!-- divider -->
                <div class="divider-line-half"></div>
                <!-- end divider -->

                <div class="content">
                    <img src="images/user-buyer1.png" alt="">
                    <div class="text">
                        <h6>Aamir</h6>
                        <ul class="rate-product">
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star-half-alt"></i></li>
                        </ul>
                        <p class="date">3 min ago</p>
                        <i class="fas fa-thumbs-up like-button"></i>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, explicabo.</p>
                    </div>
                </div>

                <!-- divider -->
                <div class="divider-line-half"></div>
                <!-- end divider -->

                <div class="content">
                    <img src="images/user-buyer3.png" alt="">
                    <div class="text">
                        <h6>Kemal</h6>
                        <ul class="rate-product">
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star"></i></li>
                            <li><i class="fas fa-star-half-alt"></i></li>
                        </ul>
                        <p class="date">3 min ago</p>
                        <i class="fas fa-thumbs-up like-button"></i>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, explicabo.</p>
                    </div>
                </div>
                <!-- view all reviews -->
                <div class="view-all-review">
                    <a href="/all-reviews/">View All Reviews</a>
                </div>
                <!-- end view all reviews -->
            </div>
        </div>
        <!-- end product review -->

        <!-- divider -->
        <div class="divider-line-full"></div>
        <!-- end divider -->

        <!-- recommended for you -->
        <div class="recommended-you">
            <div class="container">
                <div class="section-title">
                    <h3>Recommended</h3>
                </div>
                <div data-space-between="10" data-slides-per-view="auto" class="swiper-container swiper-init">
                    <div class="swiper-wrapper" id="recommended-product">
                        <div class="swiper-slide">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end recommended for you -->

    </div>
    <!-- end product details -->

    <!-- action product details -->
    <div class="wrap-action-product-d">
        <div class="container">
            <div class="row">
                <div class="col-60">
                    <div class="content-button">
                        <a href="#" class="button secondary-button"><i class="fas fa-cart-arrow-down"></i>Masukan ke Keranjang</a>
                    </div>
                </div>
                <div class="col-40">
                    <div class="content-button">
                        <a href="#" class="button primary-button"><i class="fas fa-cart-plus"></i>Beli</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end action product details -->
</div>
</div>

anyone can help me ? Thanks a lot!