How to route directly to another page when page is loaded

I have a use case that does not seem to work:

  1. User loads a page. This page needs to redirect the user directly to another page based on the current state.

I have a similar use case for the login page were the user is directly redirected to the start page if he is already authenticated.

I do this with the following code:

mounted () {
if (this.isAuthenticated) {
nextTick(() => {

    f7.views.main.router.navigate('/home/', { reloadAll: true })


For the login this works perfectly. However on another pages I can’t get this to work.

I tried to put this in f7ready or onMouinted, but it does not work. The weird thing is that if I add a sleep of 300ms before the router.navigate it does work.

onMounted(async () => {
  await sleep(300);
  return f7.views.main.router.navigate('/route/');

When I remove the sleep and debug the router, it seems to be that the state is not yet updated because the currentRoute is still from the previous page. That is strange because the page transition is already completed.

I’ve found that the routing does work on the “pageAfterIn” event. However, this is too “late”. The page itself is already visible. Is there a possibility to route before the page is actually visible?

You can redirect from within a route, even before a page get’s loaded. For example using the beforeEnter or redirect parameters:

Greetings from another Tim :slight_smile:

1 Like