vuejs-framework7 toolbar route

Question

I am working on a app made with Framework7 and vuejs.

I have bottom toolbar but i have routing problem here.

here's my code

route.js

{
path: '/about/',
component: require('./assets/vue/pages/about.vue')}

main.vue

<div class="toolbar tabbar tabbar-labels">
  <div class="toolbar-inner">
    <a class="item-link tab-link" href="/about/">
      <i class="fa fa-home"></i>
      <span class="tabbar-label">Home</span>
    </a>
  </div>
</div>

when i clicked the toolbar i get the error Cannot GET /about/.

but when i clicked same link from outside the toolbar, it works...

Someone have any idea or have a better solution?

This seems like it should be working. I'd try giving your `'/about/'` route a name property in its definition in the `route.js` file (like `name: 'about',`) and then using a `router-link` tag to generate the link to that named route via `` — thanksd, Oct 17 '17 at 15:09
missing details: vue version, vue-router version, framework7 version. — LiranC, Oct 19 '17 at 10:52

score 0 · Answer 1 · answered Apr 26 '18 at 07:39

SPA project means all the pages are base on a same uri, distinguished by following '#', for example:

So all the pages are on uri '/', '/about' != '/#/about'

You should use <router-link to="/about">Go to About</router-link> or use js code router.push({ path: 'about' }).

See vue-router

vuejs-framework7 toolbar route

1 Answers1