Route async tablet/movil

Framework7 version: 8.0.4
Platform and Target: iOS 7.0.1, Android 12.0.1, Cordova 12.0.0

I am trying to get dynamic content loading, I have a .f7 page in which I have a left menu and a right container, if I am on mobile, the left menu I want to open a new page (this if it works), but if I am on tablet I want the left menu to load the page in the right container, I am using async but I don't get it, I show my code:

Page with the containers:

<div class="page-content">
    <div class="grid grid-cols-1 medium-grid-cols-2 ">   

      <div class="list list-strong inset list-dividers-ios components-list searchbar-found menu-panel">
        <ul>
          <li>
            <a class="item-content item-link" href="/presupuestos/">
              <div class="item-media">
                <i class="icon icon-f7"></i>
              </div>
              <div class="item-inner">
                <div class="item-title">Presupuestos</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link" href="/eventos/">
              <div class="item-media">
                <i class="icon icon-f7"></i>
              </div>
              <div class="item-inner">
                <div class="item-title">Eventos</div>
              </div>
            </a>
          </li>
        </ul>
      </div>

      <div class="panel-right">
        <!-- El contenido de detalle se cargará aquí -->
        <p>Seleccione una opción para ver los detalles aquí.</p>
      </div>

    </div>
  </div>

my routes.js file


import HomePage from '../pages/home.f7';
...

import Presupuestos from '../pages/presupuestos.f7';
...

var version = "1.0.0";

var routes = [
  {
    path: '/',
    component: HomePage,
    options: {
      props: {
        version: version,
      },
    },
  },
  ...

  {
    path: '/presupuestos/',
    async({ app, to, resolve }) {
        if (screen.orientation.type.startsWith('landscape')) {
            console.log('----> tablet');

            const container = app.$el.find('.panel-right');
            if (container.length === 0) {
                console.error('Contenedor .panel-right no encontrado.');
                return;
            }

            resolve({
                el: container,
                component: Presupuestos,
            });
        } else {
          console.log('----> móvil');
          resolve({
              component: Presupuestos,
          });
        }
    }
  },

  {
    path: '(.*)',
    component: NotFoundPage,
  },
];

export default routes;

my page budgets.f7:


<template>
<div class="page" data-name="presupuestos">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <!-- <span class="if-not-md">Back</span> -->
        </a>
      </div>
      <div class="title">${titulo_pagina}</div>
    </div>
  </div>

  <div class="page-content">

    <p>hola</p>

  </div>
</div>
</template>
<script>
  import utils from '../js/utils.js';

  export default (props, {$, $f7, $on, $update }) => {

    let id_bod = props.id_bod;
    let titulo_pagina = "Presupuestos ";

    let i18n = $f7.i18n;

    const abrirT = (e) => {
      utils.abrirTeclado();
    }

    const cerrarT = (e) => {
      utils.cerrarTeclado();
    }

    $on('pageInit', () => {      

    });

    return $render;
  };
</script>

I did not realize that this is the master view for this, I have already adapted it and it works correctly, now I have a doubt, my first link is budgets, can I make it so that when loading the master view by default the first option is selected?

<template>
<div class="page" data-name="about">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <!-- <span class="if-not-md">Back</span> -->
        </a>
      </div>
      <div class="title">${titulo_pagina}</div>
    </div>
  </div>

  <div class="page-content">

    <div class="list links-list list-strong inset">
      <ul>
        <li><a href="/presupuestos/${id_bod}/" data-reload-detail="true">Presupuestos</a></li>
        <li><a href="/eventos/" data-reload-detail="true">Eventos</a></li>
      </ul>
    </div>

  </div>

</div>  
</template>

y mi route.js:

{
    path: '/bodas-mas/:id_bod/',
    component: BodasMas,
    master: true,  // Indica que esta es la ruta maestra para el diseño master-detail
    detailRoutes: [
      {
        path: '/presupuestos/:id_bod/',
        component: Presupuestos,
      },
    ]
  },

framework7io / framework7

Route async tablet/movil #4263