V6 - Page Component with async route how to use it in v6 correctly?

1

This was my route in v5 to request a hotel and open the hotel page…

{
    path: '/store/:hotelId/',
    async: function (routeTo, routeFrom, resolve, reject) {

      var router = this;
      var app = router.app;

      app.preloader.show();

      var hotel_id = routeTo.params.hotelId;

      var thishotel = app.data.hotels.filter(item => {
        return item.id == hotel_id;
      });

      setTimeout(function () {

        app.preloader.hide();
        resolve({
          component: HotelPage,
        }, {
          context: {
          }
        });
      }, 1000);
    },
    options: {
      transition: 'f7-cover-v',
    },
    on: {
      pageInit: function (event, page) {
      }
    },
  },

I saw this online link that mention some changes to the router component

https://framework7.io/docs/router-component.html

and I found this:

 {
    path: '/some-page/:id',
    // Component
    component: (props, { $h, $f7, $on }) => {
      const title = 'Component Page';
      const names = ['John', 'Vladimir', 'Timo'];

      const openAlert = () => {
        $f7.dialog.alert('Hello world!');
      }

      $on('pageInit', (e, page) => {
        // do something on page init
      });
      $on('pageAfterOut', (e, page) => {
        // page has left the view
      });

      return () => $h`
        <div class="page">
          <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="title">${title}</div>
            </div>
          </div>
          <div class="page-content">
            <a @click=${openAlert} class="red-link">Open Alert</a>
            <div class="list simple-list">
              <ul>
                ${names.map((name) => $h`
                  <li>${name}</li>
                `)}
              </ul>
            </div>
          </div>
        </div>
      `;
    },
  },

It will be useful a working example route of v5 to v6 with page component and async route equivalent use.

2

I think I found what I was looking for:

https://framework7.io/docs/routes.html

    async: function ({ app, to, resolve }) {
...

see…

Route Callback Context

routeTo, routeFrom renamed to to, from in v6

I hope this helps others!

3

A question related to this topic the context is not passing to the next page in v6 as context so I guessed according documentation that I have to use props but when I print to the console the content of props in the hotel opened page and I only see hotelId passed as props but not thisHotel…

this is my code:

  {
    path: '/hotel/:hotelId/',
    async: function ({ app, to, resolve }) {

      app.preloader.show();

      var hotel_id = to.params.hotelId;

      console.log('getting... ' + hotel_id);

      var hotels = store.getters.hotels.value;

      var thisHotel = hotels.filter(item => {
        return item.id == hotel_id;
      });

      setTimeout(function () {

        app.preloader.hide();

        resolve({
          component: Hotel,
          props: {
            thisHotel: thisHotel,
          }
        });

      }, 1000);

    }
  },

How can I pass to the next page thisHotel as props here in v6?
appreciate any reply!

4 
// resolve( { component: Hotel, props: { thisHotel: thisHotel } });
=> resolve( { component: Hotel }, { props: { thisHotel: thisHotel } } );
2 Likes
5

I see why it was not showing in my case, thanks! I will test it out now!
big thanks!