How to trigger route change with javascript code

[leapon]

In the kitchensink example, route changes are achived with link attribute or "back" class name.

For example:

How can I force a route change using javascript code?

I searched source code and saw this.$emit to trigger event. However I can't find where these events are received and route gets changed in Framework7-Vue code base.

[damir]

Each F7View component has a router under f7View.router property.

You can access it from your main component with $children[0].$children[0].f7View.router and then save it somewhere with friendlier name.

[leapon]

@damir Thanks! that works!

goNext: function(event) {
  console.log('go to page2');
  var f7View = this.$root.$children[0].$children[0].$children[0].f7View;
  console.log('>>> f7View:', f7View);
  f7View.loadPage('/page2/');
}

[chasebank]

That does indeed seem to work, but can someone explain the logic behind the long string of children? What exactly are those pointing to? I would expect root > app(child) > views(child) > f7view, but that'd be two children, which is incorrect.

[bencompton]

Yeah, that certainly is not the most intuitive way to access views / the router. As of this PR, it is now possible to do something like this instead:

this.$f7['mainView'].loadPage('/page2/')

[chasebank]

Ah, thanks. That's much better!