Router.navigate not working

1

Hi, i have simple page with 2 routes , but when i need to navigate to “shelf” page, it does not show anything.
it loads the page “shelf.html” in the console network tab but nothing happens in the page.

var app = new Framework7({

				name: 'example',
				theme: 'auto',
				el: '#app',
				id: 'ir.example.test',
				routes: [{
				    name:'home',
					path: '/',
					url: './index.html',
				},{
                    name:'shelf',
                    path:'/shelf/:id',
                    url:'./shelf.html',
				}
				 ]
			});
var leftView=app.views.get('.view-left');
var data=leftView.router.navigate({ url: 'shelf/123' },{ transition: 'f7-cover' });
console.log(data);

and my index.html :



        <div class="page" data-name="home">
            <div class="page-content">
						<div class="navbar no-shadow hide-bars-on-scroll">
							<div class="navbar-bg"></div>
							<div class="navbar-inner">

								<div class="title">Title</div>

							</div>
						</div>

                    <a href="/shelf/1246" class="link section">bookList</a>
                    <a href="/shelf/124">Some Page</a>


                <div class="card card-outline">
                    <div class="card-header"> </div>
                    <div class="card-content card-content-padding">
                        <!-- Card content -->

                <!-- Slider container -->
                <div class="book-slides swiper-container swiper-init">
                    <!-- Slides wrapper -->
                    <div class="swiper-wrapper">
                        <!-- Slides -->

                            <div class="swiper-slide">
                                <div class="slide">

                                </div>
                            </div>


                    </div>
                    <!-- Pagination, if required -->
                    <div class="swiper-pagination"></div>
                </div>
                    </div>
                </div>









            </div>
        </div>

    </div>

    <!-- left view -->
    <div class="view view-init view-left" data-name="left">
        <div class="page" data-page="shelf">
            <div class="page-content">

            </div>
        </div>
    </div>
</div>

</div>

then shelf.html

<template>
    <div id="app">

            <div class="view view-main view-init" data-name="right">

                <div class="page" data-name="home">
                    <div class="page-content">
                        hello!
                    </div>
                </div>
            </div>
    </div>
</template>