How to redirect to another route in Framework7 router?

Questions
1

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.

2

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

3

@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?

4

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
5

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!

6

Does this still work in v6? I’m doing something like this but the navigate doesn’t take.

beforeEnter({app, resolve, reject, router}) {
  if (/* need redirect */) {
    reject();
    router.navigate('/another-path/');
    return;
  }
  resolve();
}

I’ve also tried treating it like an async route with reject({path: path}), and just reject(path);

7

Yes, same works in v6. What is your full route code? Can you give more complete example?

8

Hmm… something else is actually going on. It’s because I’m trying to run the routes list through a function that applies a redirect to everything. For some reason the routing stops working if I do that, so something like this:

function applyRouteAuth(base_routes) {
  let routes = [];
  for (let route of base_routes) {
    if (!route.hasOwnProperty('redirect')) {
      if (route.hasOwnProperty('component')) {
        route.redirect = authRedirect;
        routes.push(route);
      }
    }
  }

  return routes;
}

The redirect works fine if I just do something like:

export default [
  {
    path: '/',
    redirect: redirectHome
  }
];
9

If you call this function on all routes, then according to its logic there won’t be any route without redirect which doesn’t have much sense :), plus it is better to use beforeEnter instead of redirect

10

I had some null redirects specified on certain routes so it wasn’t applying to everything. :slight_smile:

I switched to beforeEnter and just manually attached them to all the routes I wanted. It must just be something quirky happening on my side, but I’m going to ignore that for another day. :sweat_smile:

Thanks for the help!