Understanding f7-router


#1

I was trying to figure out f7 router, but, since, “$f7route and $f7router component properties are only available inside of custom page components” it it not suitable for my project. I have now installed vue-router, and called Vue.use(VueRouter), and this error appears:

[Vue warn]: Error in beforeCreate hook: "TypeError: this._router.init is not a function"

In Main.js

...
import Router from './routes.js' // Import Routes
import VueRouter from 'vue-router'
import App from './app'; // Import App Component

Vue.use(Framework7Vue, Framework7) // Init F7 Vue Plugin
Vue.use(VueRouter)

new Vue({ 
  el: '#app',
  template: '<app/>',
  store,
  router: Router, 
  ...


#2

Why, if you compose your app with component then you usually don’t need access to these from somewhere else. Even if you need you may just use F7’s view/router api to access any router and route


#3

As for your issue i think you are using something wrong in Router. The error message you mentioned more comes from VueRouter


#4

Thank you for your reply, Vladmir.
As you suggested “Router” was the culprit. I forgot put these in there:

import Vue from "vue";
import Router from "vue-router";

The reason for using router outside of components is that I want to make reference to it upon app creation like so:

new Vue({
 created () {
    db.initializeApp(dbConfig)
    db.auth().onAuthStateChanged((user) => {
      if (user) {
        store.state.user = db.auth().currentUser
        this.$router.push('/home/')
      }
      else {
        store.state.user = null
        if (this.$route.path !== '/login/') {
          this.$router.push('/login/')
        }
      }
    })
  },
  framework7: {
  ...
  }
})

#5

No more routing errors when using vue-router, but when my page loads it does not render. Can I not use framework7’s “views” when working with vue-router?
This gif shows the “login page” loading, but not rendering.


#6

I suppose it won’t work with Vue router as it is not designed for it . You can move your created hook to onF7Ready method and use F7 router from there in same way


#7

Thank you, Vladimir. Once again, your solution has helped me.
I am still having trouble understanding what to put in “App.vue” so that the f7-routes are used correctly.
As of now, my “login.vue” does not render, and the URL does not appear.
Here is a screen shot of the behavior.
I imagine that it is because of this f7-view in “App.vue”. Using vue-router instead, this page would have just a “router-view” tag here. What should I have in “App.vue” instead of this f7-view?

<template>
  <!-- App -->
  <div id="app">

    <!-- Main View -->
 <f7-view id="main-view" main url="/home/" main navbar-through></f7-view>
  <!-- vue-router would just have this tag here 
   <router-view></router-view-->
...

#8

Ok, in app.vue keep view empty and don’t init it:

<f7-view main :init=“false”></f7-view>

Then in your onF7Ready

// when need login page
// init view with default login route

f7.views.create(‘.view-main’, { url: ‘/login/‘ })

//when you need home page on app start
// init view with seagulls home page

f7.views.create(‘.view-main’, { url: ‘/home/‘ })

#9

Thanks for your help, Vladimir.
I added the following to “main.js”:

new Vue({ 
 ...
 framework7: {
  ...
  methods: {
    onF7Ready(f7) {
      db.initializeApp(dbConfig)
      db.auth().onAuthStateChanged((user) => {
        if (user) {
          store.state.user = db.auth().currentUser
          <!-- Added "app" before f7.views.create -->
          app.f7.views.create('.view-main', { url: '/home/' } ), 
          app.f7.router.routes.push('/home/')
        }
        else {
          store.state.user = null
          if (app.f7.router.currentRoute.path !== '/login/') {
            <!-- Added "app" before f7.views.create -->
            app.f7.views.create('.view-main', { url: '/login/' } ) ,
            app.f7.router.routes.push('/login/')
          }
        }
      })
    }
  }
}
})

And in App.vue I have.

<f7-view id="view-main" main navbar-through :dynamic-navbar="true" :init="false"></f7-view>

This screenshot shows the f7-view(4/4)'s “props” after running “app.f7.views” in the console and expanding the “f7-view” object.


#10

https://jsfiddle.net/1wgtov4z/