Hello all and Hope the Holiday Season is treating everyone well.
Update: I am using V1 (Sept 2017 Release). Will be looking into moving to v2
I have been working on an app for the last month now, this is my first application using F7 and Vue. I’ve read both documentations and have a decent understanding of the frameworks as the Standalone selves. Where I get fuzzy is with putting the two together, since F7 has its way of doing things and Vue has its way.
So, the root of my problems/questions is with the Routing. I used the ‘Framework7 Vue Webpack Cordova App Template’ in the Starter App Templates, as my starting point and have since been changing it to my application.
Currently, my routing methods are… well I’m not sure if I am doing it correctly or not, but I have it working.
My Current Routing File is:
export default [
{
path: '/account-information/',
component: require('./assets/vue/pages/accounts/my-account')
},
{
path: '/',
component: require('main.vue'),
tabs:[
{
path: '/toolbox/',
tabId: 'ToolboxTab',
routes: [
{
path:'/',
component: require('./assets/vue/pages/toolbox/toolbox-base.vue')
},
{
path: '/simple-stop-watch/',
component: require('./assets/vue/pages/toolbox/tools/simple-stop-watch.vue')
},
{
path: '/multi-stop-watch/',
component: require('./assets/vue/pages/toolbox/tools/muliti-stop-watch.vue')
}
]
},
{
path: '/community/',
tabId: 'FeedTab',
component: require('./assets/vue/pages/community/community-base.vue')
},
{
path: '/office/',
tabId: 'ManageTab',
routes: [
{
path: '/',
component: require('./assets/vue/pages/office/office-base.vue')
}
]
}
]
}
]
The tab routing works, I need to get to ‘/account-information/’ from the main.vue file which is the base Vue/F7 page. Their is a 3 tab navation bar that works. However to access the Account Infromation page the user will open the right panel and select the option. So my problem is I can’t get it to load OR it will load and the main.vue will cover it.
My number one problem with this is I can’t figure out how to access the ‘mainView’ that is always referenced in the F7 docs. I have all my functionality broken out into separate files, and the docs all show examples in the main.js file and I’ve done exports and imports and can’t access the instance.
If anything else (code) is required to get a better idea of how to solve this problem I will update this post with the requested information. Thanks all!