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,
...
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
As for your issue i think you are using something wrong in Router. The error message you mentioned more comes from VueRouter
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: {
...
}
})
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.
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
1 Like
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-->
...
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/‘ })
1 Like
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.