[SOLVED] `routesBeforeEnter` not working (vue.js)

Hello,
I’m using the official vuejs+webpack template (https://github.com/framework7io/framework7-template-vue-webpack) and I’m trying to check if an user is logged in or not and redirect based on that.
I’ve tried to add routesBeforeEnter to the f7params object in src/app.vue but it’s not being called, here is the full object:

      f7params: {
        id: 'io.framework7.testapp', // App bundle ID
        name: 'Framework7', // App name
        theme: 'auto', // Automatic theme detection
        // App routes
        routes: routes,
        routesBeforeEnter: function(to, from, resolve, reject) {
          console.log('check log in here')
          resolve('/404')
        }
      }

No redirect happens and I cannot see any output in the console, so I think the routesBeforeEnter function is not being called

You have put it in a wrong place, it is a View’s parameter http://framework7.io/docs/view.html#view-parameters:

      f7params: {
        id: 'io.framework7.testapp', // App bundle ID
        name: 'Framework7', // App name
        theme: 'auto', // Automatic theme detection
        // App routes
        routes: routes,
        view: {
          routesBeforeEnter: function(to, from, resolve, reject) {
            console.log('check log in here')
            resolve();
          }
        },
      }

Also resolve() doesn’t accept any arguments here. To make a redirect here use something like this:

f7params: {
        id: 'io.framework7.testapp', // App bundle ID
        name: 'Framework7', // App name
        theme: 'auto', // Automatic theme detection
        // App routes
        routes: routes,
        view: {
          routesBeforeEnter: function(to, from, resolve, reject) {
            const router = this;
            if (!loggedIn && to.url !== '/login/') {
              reject();
              router.navigate('/login/');
              return;
            }
            resolve();
          }
        },
      }
1 Like

thank you very much, it’s working fine with your code!