V5 help with async router function

Questions
1

Hi there,

I have recently migrated to v5 and its great! everything looks really nice.

I seem to be having a problem where the pages the fetch data from an online api are no longer working after the migration.

Here is a sample of my code in the route.js

{
path: ‘***’,

async: function (routeTo, routeFrom, resolve, reject) {
  var router = this;
  var app = router.app;
  app.preloader.show();
  app.request({
    method: 'GET',
    url: '*****/api/auth/subscriptions',
    dataType: 'json',
    success: function (data) {
      app.preloader.hide();
      resolve(
          // How and what to load: template
          {
            component: NotificationSettingsPage,

          },
          // Custom template context
          {
            context: {
              data: data,
            },
          }
      );
    },
    error: function(e,xhr) {
      app.preloader.hide();
        app.dialog.alert('An error occurred, please try again.');
    }

  });

}

},

2

this is the error I am getting:

Unhandled Promise Rejection: Error: TypeError: self[name].call is not a function. (In 'self[name].call(self)', 'self[name].call' is undefined)

3

That is because of name conflict, will be fixed in next update. Now you can change data to something else. Or even better make this request directly in component’s data method which is recommended way in v5: https://framework7.io/docs/router-component.html#component-options

4

I have done as you suggested and it works perfectly.

Thank you kindly