How to redirect to another route in Framework7 router?

I’m using Framework7 with Vue in my project and having troubles with pretty basic stuff. In my f7 routes I want to have a guard on a / route which checks if user is logged in and then redirects to /home/ another otherwise redirects to login screen at /login/ . But with the current setup redirects do not work. Any ideas why?

routes.js

const routes = [
  {
    path: '/',
    async: function (routeTo, routeFrom, resolve, reject) {
      if (isUserLoggedIn()) {
        console.log(`*** redirecting to /home/`);
        resolve({redirect: '/home/'});
      } else {
        console.log(`*** redirecting to /login/`);
        resolve({redirect: '/login/'});
      }
    },
  },
  {
    path: '/login/',
    loginScreen: Login,
    on: {
      pageBeforeIn: function (event, page) {
        console.log(`*** /login/ onBeforeIN`);
        // never called
      }
    }
  },
  {
    path: '/home/',
    component: HomePage,
    on: {
      pageBeforeIn: function (event, page) {
        console.log(`*** /home/ onBeforeIn`);
        // never called
      }
    }
  }
];

This was also asked on SO and will post the answer is answered there.

change to resolve({url: ‘/home/’});

@shastox, thanks for your reply but it did not work work me.
I tried:

resolve({redirect: '/home/'});
resolve({url: '/home/'});
resolve({path: '/home/'});

None of them caused redirection to login of home routes. Its a first time I’m using the framework so not sure if missing something specific but reading the docs it would indicate that it should work.

The only way it works is if I resolve with Login/Home components right away, like such:

resolve({component: Login});

But this is not what I want to achieve as it is not redirecting to /login/ path so no events like pageBeforeIn() on /login/ path are triggered.
Could there be anything else I’m missing?

async is not for redirects, you need to use route’s beforeEnter (https://framework7.io/docs/routes.html#route-before-enter-leave) for this:

beforeEnter(to, from, resolve, reject) {
  const router = this;
  if (/* need redirect */) {
    reject();
    router.navigate('/another-path/');
    return;
  }
  resolve();
}
3 Likes

No answer beats an answer from creator himself, I’m honoured. :slight_smile:
Initially I did follow documentation and had the similar setup with beforeEnter as in your answer but it did not work so I ended up with async. Apparently there was another issue why it did work for me which was that I had in my login route loginScreen: Login, rather than component: Login,. Even though I was expecting beforeEnter to be called on login route even if it had wrong config in terms of loginScreen vs component but as it happens this is not the framework works.

Long story short, as per your advice using beforeEnter on / for redirection and having assigning Login screen to component rather than loginScreen on login route did resolve my issues.

Thanks again!