This.$f7router.navigate in app.vue dosen't work

I use this.$f7router.navigate in app.vue,the error says navigate is not defined .when i see the console.log,i find this.$f7router is undefined why i can’t use this.$f7router.navigate in app.vue .

this.$f7router.navigate(`/signup`);

Documentation is pretty clear about it https://framework7.io/vue/vue-component-extensions.html

This property only available for components loaded with router (e.g. pages, routable modals, routable tabs). If you need to access this property in “deeper” child components, then you need to pass it down using props.

In main app component you should reference router you need using API, like

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

thank you very very very much~~~