One page is overlapping another, after transition

Questions
1

paste
paste326×576 91.1 KB

I’m new to F7, when trying to create a page transition with a router, the next page replaces the previous page.

     var routes = [

{
path: ‘/’,
url: ‘./index.html’,
},
{
path: ‘/form/’,
url: ‘./pages/form.html’,
},
{
path: ‘/about/’,
url: ‘./pages/about.html’,
options: {
transition: ‘f7-push’,
},
},
]

HOME.html

<div class="view view-init view-left" data-name="left" data-browser-history="true">

  <div class="page">

    

          <div class="block">

            <div class="container mt-5">

              <b class="text-muted" id="identyUser" style="display: none;">375484938ddjeb67f8709</b>

              <div class="background-style">

                <a href="" class="text-white">Meus endereços</a>

              </div>

              <div class="background-style">

                <a href="" class="text-white">Segurança</a>

              </div>

              <div class="background-style">

                <b style="color: white !important; font-size: 14px">Configurações:</b>

                <li>

                  <span>Receber notificações via WhatsApp</span>

                  <label class="toggle toggle-init color-blue">

                    <input type="checkbox" checked />

                    <span class="toggle-icon"></span>

                  </label>

                </li>

                <li>

                <ons-list-item>

                  <div class="center" style="background-image: none !important">

                    Receber aviso de Combos e Promoções

                  </div>

                  <div class="right" style="background-image: none !important">

                    <ons-switch id="switchPromotions" checked></ons-switch>

                  </div>

                </ons-list-item>

              </div>

            </div>

          </div>

    </div>

</div>

PAGE2.html

Fazer pedido
<div class="page-content">

  <div class="block">

    <div id="mn-pd">

      <div class="container">

              <div class="pd-s">

                  <p class="ml-5 mt-4 mb-3" style="color: white;">A opção está liberada conforme o horário atual.</p>

                <div id="btns" class="mt-4">

                    

                </div>

                <div id="options">

                    

                </div>

              </div>

      </div>

      <b class="text-left" id="hr" style="color: white"></b>