Framework7 + Vue Routing Questions

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!

Any resolution to your tabs routing issue? Are you using f7-views to render your tab views?
If so, can you show how to do that? I followed the examples in the documentation and for the first time ever, my windows 10 insiders build crashed.

I am using f7-views and f7-links to manage the tabs and views for my page, but they are not found by the router.

    <!-- Switch Between Tabs -->
    <f7-toolbar tabbar>
      <!-- adding a url property, ie. 'url="/all/"' to the links has no effect-->
      <f7-link tab-link="#all" text="all" tab-link-active />
      <f7-link tab-link="#onl" text="online" />
    </f7-toolbar>
    <!-- Tabs -->
    <f7-views tabs id="tabs">
      <!-- this url is defined in the routes as "/", but setting the url here to "/"
           causes windows to crash from a memory leak-->
      <f7-view tab id="all" url="/all/" main tab-active />
      <f7-view tab id="onl" url="/online/" />
    </f7-views>

This is the part of my router for the tabs:

      {
       'path: '/mates/',
        id: 'mates',
        tabs: [
          { meta: { tabId: 'all' }, component: all, path: '/' },
          { meta: { tabId: 'onl' }, component: onl, path: '/online/' }, 
          { meta: { tabId: '404' }, component: err, path: '(.*)' }
        ],
      },

Why in the world you have put tab id into meta prop? http://framework7.io/docs/routes.html#routable-tabs

Oh, didn’t note it is v1. Routable tabs won’t work with Views-Tabs and highly recommend to move to v2 while it is not too late

I thought that I was using f7 version2, but I’ll check again.
I’m just a hobby programmer, so I don’t fully understand all of the nuances of meta data vs. properties and so on. It there a working example of views as tabs for f7 Vue? I just wanted to take advantage of the router history for tabs…
I based my code on the framework7-vue documentation for “views”…:

<f7-views tabs>
  <f7-view id="tab-1" main tab tab-active>...</f7-view>
  <f7-view id="tab-2" tab>...</f7-view>
</f7-views>

<!-- Renders to: -->
<div class="views tabs">
  <div class="view view-main tab tab-active" id="tab-1">...</div>
  <div class="view tab" id="tab-2">...</div>
</div>

Your code is correct, but by default there is no way to use Views as routable tabs, because View is a router itself. So the content in all Views will be loaded at startup. But you can load View’s content from routes:

<f7-view id="tab-1" main tab tab-active url="/view-1-page/"></f7-view>

And in your routes you must have a page route for /view-1-page/

Thanks, but I wrote my code following from the example on this page under the section “Views as Tabs”.

I was not able to find any examples of f7 tabs which load a new page with it’s own view and url. Even the phonegap templates use components, but the url does not change when the tabs are selected.

Views used as Tabs can’t be routable means URL won’t change on tab select

1 Like