یک قالب تمپلیت دارم که جابجایی صفحات بشکل زیر انجام میشه 
<a href="/action-sheet/">
                      <div class="colored-icon blue">
                        <i class="icon f7-icons">square_arrow_up_fill</i>
                      </div>
                      اکشن شیت
                    </a>

var app = new Framework7({
  el: "#app",
  name: "یووی",
  theme: "ios",
  iosTranslucentBars: false,
  iosTranslucentModals: false,
  view: {
    browserHistory: true,
    browserHistoryAnimate: Framework7.device.ios ? false : true
  },
  routes: [
    // Features
    {
      path: "/action-sheet/",
      url: "pages/features/action-sheet.html",
    },
    {
      path: "/columns/",
      url: "pages/features/columns.html",
    },
    {
      path: "/dialog/",
      url: "pages/features/dialog.html",
    },
    {
      path: "/icons/",
      url: "pages/features/icons.html",
    },
    {
      path: "/infinite-scroll/",
      url: "pages/features/infinite-scroll.html",
    },
    {
      path: "/notification/",
      url: "pages/features/notification.html",
    },
    {
      path: "/page/",
      url: "pages/features/page.html",
    },
    {
      path: "/panel/",
      url: "pages/features/panel.html",
    },
    {
      path: "/photo-browser/",
      url: "pages/features/photo-browser.html",
    },
    {
      path: "/popover/",
      url: "pages/features/popover.html",
    },
    {
      path: "/popup/",
      url: "pages/features/popup.html",
    },
    {
      path: "/pull-to-refresh/",
      url: "pages/features/pull-to-refresh.html",
    },
    {
      path: "/sheet-modal/",
      url: "pages/features/sheet-modal.html",
    },
    {
      path: "/swipe-to-delete/",
      url: "pages/features/swipe-to-delete.html",
    },
    {
      path: "/tabs/",
      url: "pages/features/tabs.html",
    },
    {
      path: "/text-editor/",
      url: "pages/features/text-editor.html",
    },
    {
      path: "/toast/",
      url: "pages/features/toast.html",
    },
    {
      path: "/tooltip/",
      url: "pages/features/tooltip.html",
    },
    {
      path: "/typography/",
      url: "pages/features/typography.html",
    },
    // Components
    {
      path: "/accordion/",
      url: "pages/components/accordion.html",
    },
    {
      path: "/album-list/",
      url: "pages/components/album-list.html",
    },
    {
      path: "/author-list/",
      url: "pages/components/author-list.html",
    },
    {
      path: "/badge/",
      url: "pages/components/badge.html",
    },
    {
      path: "/button/",
      url: "pages/components/button.html",
    },
    {
      path: "/checkbox/",
      url: "pages/components/checkbox.html",
    },
    {
      path: "/card/",
      url: "pages/components/card.html",
    },
    {
      path: "/card-footer/",
      url: "pages/components/card-footer.html",
    },
    {
      path: "/card-big-footer/",
      url: "pages/components/card-big-footer.html",
    },
    {
      path: "/comments/",
      url: "pages/components/comments.html",
    },
    {
      path: "/event-list/",
      url: "pages/components/event-list.html",
    },
    {
      path: "/history-timeline/",
      url: "pages/components/history-timeline.html",
    },
    {
      path: "/information-block/",
      url: "pages/components/information-block.html",
    },
    {
      path: "/link-banner/",
      url: "pages/components/link-banner.html",
    },
    {
      path: "/list/",
      url: "pages/components/list.html",
    },
    {
      path: "/list-icon/",
      url: "pages/components/list-icon.html",
    },
    {
      path: "/picker/",
      url: "pages/components/picker.html",
    },
    {
      path: "/post-list/",
      url: "pages/components/post-list.html",
    },
    {
      path: "/preloader/",
      url: "pages/components/preloader.html",
    },
    {
      path: "/progress-bar/",
      url: "pages/components/progress-bar.html",
    },
    {
      path: "/radio/",
      url: "pages/components/radio.html",
    },
    {
      path: "/range-slider/",
      url: "pages/components/range-slider.html",
    },
    {
      path: "/rating/",
      url: "pages/components/rating.html",
    },
    {
      path: "/slider-cards/",
      url: "pages/components/slider-cards.html",
    },
    {
      path: "/slider-cards-footer/",
      url: "pages/components/slider-cards-footer.html",
    },
    {
      path: "/slider-categories/",
      url: "pages/components/slider-categories.html",
    },
    {
      path: "/slider-authors/",
      url: "pages/components/slider-authors.html",
    },
    {
      path: "/slider-albums/",
      url: "pages/components/slider-albums.html",
    },
    {
      path: "/slider-movies/",
      url: "pages/components/slider-movies.html",
    },
    {
      path: "/stepper/",
      url: "pages/components/stepper.html",
    },
    {
      path: "/stocks/",
      url: "pages/components/stocks.html",
    },
    {
      path: "/text-input/",
      url: "pages/components/text-input.html",
    },
    {
      path: "/ticket/",
      url: "pages/components/ticket.html",
    },
    {
      path: "/toggle-button/",
      url: "pages/components/toggle-button.html",
    },
    // Pages
    {
      path: "/signup/",
      url: "pages/pages/signup.html",
    },
    {
      path: "/signin/",
      url: "pages/pages/signin.html",
    },
    {
      path: "/forgot-password/",
      url: "pages/pages/forgot-password.html",
    },
    {
      path: "/messages/",
      url: "pages/pages/messages.html",
    },
    {
      path: "/chat/",
      url: "pages/pages/chat.html",
    },
    {
      path: "/single/",
      url: "pages/pages/single.html",
    },
    {
      path: "/create-post/",
      url: "pages/pages/create-post.html",
    },
    {
      path: "/movie/",
      url: "pages/pages/movie.html",
    },
    {
      path: "/album/",
      url: "pages/pages/album.html",
    },
    {
      path: "/calendar/",
      url: "pages/pages/calendar.html",
    },
    {
      path: "/help-center/",
      url: "pages/pages/help-center.html",
    },
    {
      path: "/contact/",
      url: "pages/pages/contact.html",
    },
    {
      path: "/settings/",
      url: "pages/pages/settings.html",
    },
    {
      path: "/categories/",
      url: "pages/pages/categories.html",
    },
    {
      path: "/profile/",
      url: "pages/pages/profile.html",
    },
    {
      path: "/search/",
      url: "pages/pages/search.html",
    },
    {
      path: "/notifications/",
      url: "pages/pages/notifications.html",
    },
    {
      path: "/onboarding/",
      url: "pages/pages/onboarding.html",
      options: {
        transition: "f7-dive",
      },
    },
  ],
});

چطوری میتونم از این در پروژه جنگو استفاده کنم؟