[SOLVED] [v3] VUE: TypeError: Cannot read property 'navigate' of undefined

Questions
1

Hi,I take a standard example https://framework7io.github.io/framework7-template-vue-simple/, added a method and throws an error. Code:

// Init F7 Vue Plugin
Framework7.use(Framework7Vue);
// Init Page Components
Vue.component('page-about', {template: '#page-about'});
Vue.component('page-form', {template: '#page-form'});
Vue.component('page-dynamic-routing', {template: '#page-dynamic-routing'});
Vue.component('page-not-found', { template: '#page-not-found'});
// Init App
new Vue({   el: '#app',
  data() {
      return {
          // Framework7 parameters here
          f7params: {
              root: '#app', // App root element
              id: 'io.framework7.testapp', // App bundle ID
              name: 'Framework7', // App name
              theme: 'auto', // Automatic theme detection
              // App routes
              routes: [{ path: '/about/', component: 'page-about' },
              {path: '/form/', component: 'page-form'},
                  {path: '/dynamic-route/blog/:blogId/post/:postId/',component: 'page-dynamic-routing'},
                  {path: '(.*)',component: 'page-not-found'}]
          }
      };
  },
  methods: {
      ter: function () { this.$f7router.navigate('/main/');}  }
 });

tried and without this, what can be?

2

http://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

3

write: TypeError: Cannot read property ‘views’ of null - with this.$f7
and write: ReferenceError: $f7 is not defined - $f7

4

You need to call it within $f7ready http://framework7.io/vue/vue-component-extensions.html

5

this.$f7ready(($f7) => {$f7.views.main.router.navigate('/about/');});
Thank you very much, super!!!