F7 Vue - Routes Equivalent to Vue-Router beforeEnter lifecycle hook

Questions
1

I’ve been trying to set up a lifecycle hook in routes. But I can’t get it to do anything.

Using Vue-Cli, this is what I’ve tried (along with a few other configurations) but nothing seems to work. What is the correct way to to this?

{
    path: '/panel-left/',
    component: PanelLeftPage,
    created: function (){
      console.log('created');
    }
  },
2

Have you used the route properties as described on this page?

3

I figured it out by trial and error.

http://framework7.io/docs/routes.html#async-route

If you are moving from Vue Router to F7 and you want to use the F7 equivalent of the Vue-Router beforeEnter lifecycle hook, the F7 equivalent is “Async Route …resolve… reject”

Like so:

Vue-Router

  {
    path: '/', component: HomePage, name: 'homepage',
    beforeEnter(to, from, next) {
      if (userLoggedIn) {
        next('/someComponent');
      } else {
        next();
      }
    }
  },

The same thing in F7

  {
    path: '/',
    component: HomePage,
    async(routeTo, routeFrom, resolve, reject) {
      if (userLoggedIn) {
        resolve({
          component: SomeComponent})
      }
      else
      {
        resolve({
          component: HomePage})
      }
    }
  },
2 Likes
4

In addition you must export default your vuex store. If you use a named export all your values will come in as undefined.

in store.js
export default new Vuex.Store({

in F7 routes
import store from './store/store';

See this thread:

1 Like