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

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
// 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?


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

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

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

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