Access router params in Routable Modal (popup)

1

I’m using a routable modal . It works well .

Now, i try to pass a parameter and receive it like this:

return {

      data: function () {
        return {
          device: 'empty', 
        }
      },

      methods: {
        mounted: function () {
          this.device = app.views.main.router.currentRoute.params.device;
          this.$setState({device: this.device});
        },
      }, 
    }

The issue is, when the mounted method is called, it seems that currentRoute.params.device is still not available. If i try to access it through the console after opening the popup, it works.

So, this is a hack , that works. But its not very elegant as i need to use setTimeout:

  return {

      data: function () {
        return {
          device: 'empty', 
        }
      },

      methods: {
        updateData: function(params){
          this.$setState(params);
        },

        mounted: function () {
          console.log('working');
          setTimeout(() => {console.log(app.views.main.router.currentRoute.params.device)}, 100);
        },
      }, 
    }

Is there another way, using an approach that makes use of something on F7 toolbox, that i’m missing?

2

It happens because when component mounted (pages transition is still in progress), you need to use Route of the current component/page. So this will work:

mounted: function () {
  this.device = this.$f7route.params.device;
  this.$setState({device: this.device});
},

And actually it is not really required and you can set/get it right in the data like so:

     data: function () {
        return {
          device: this.$f7route.params.device, 
        }
      },

And remove what you have in mounted hook