How to navigate programatically to a routable popup?

Questions
1

I have a routable popup that opens well when clicking on a link like that <f7-list-item link="/popup/">Popup</f7-list-item>

I would like to open this popup programatically.

If I add the popup to my app.vue like this, it works well:

<f7-popup tablet-fullscreen :opened="showIntro">
  <f7-view name="intro" url="/intro/" />
</f7-popup>

But the popup is in the DOM even if the intro will never be shown. I could v-if it, but then the close animation will not be applied.
And it also means I have to stack a lot of popup in my app.vue.

Is there a way to programmatically create and open a routable popup?

I tried to simply this.$f7.router.navigate('/popup') but I have an error “you must provide a view”. But the view IS the popup itself. So I tried this this.$f7.popup.create() but it needs a content…

In conclusion: does someone has an idea of how to do it properly?

Thanks! :slight_smile:

2 
// popup.vue
<template>
  <f7-popup>...</f7-popup>
</template>

// routes.js
...
import Popup from './path/to/popup.vue';

export default [
  ...
  {
    path: '/popup/',
    popup: { component: { Popup } } 
  }
];

Then in any place this.$f7router.navigate('/popup/')

Notice the difference this.$f7router (or this.$f7.views.main.router), but not the this.$f7.router

1 Like
3

It’s exactly what I tried, but I have this error:

TypeError: Cannot read property 'navigate' of undefined

Note that I’m trying to call this.$f7router.navigate() inside this.$f7ready((f7) => { ... } in the mounted hook of app.vue, but I do not see why it should be problematic

4

https://framework7.io/vue/navigation-router.html#router-api

Please note, that $f7route and $f7router component properties are only available inside of custom page components that you load according to routes. In parent components (like in View, or where you init your Vue app instance) and in child components they are not accessible. So in this case use access to initialized View Instance, e.g. $f7.views.main.router

5

Yes, I tried already, but it does not work.

If I do the following, it opens the page ‘parameters’ in my main tab (replace the default page)

this.$f7.views.main.router.navigate('/parameters/');

But if I do this, nothing happens:

this.$f7.views.main.router.navigate('/popup/');

Note that if I click a link with href=/popup/ it opens the popup.