Link navigation to root page / with Main App Component

Questions
1

How to navigate using <a href="/" class"link"> with Main App Component structure, since there’s no root enter in routes.

In component oferty.html theres link which doesn’t work.
I have no route for “/” because componentUrl needs to be at the app instance.

app.js:

var app = new Framework7({
  root: '#app',
  name: 'BetaERP',
  version: '1.0',
  id: 'pl.BetaERP.test',
  theme: Framework7.device.desktop ? 'aurora' : 'auto',
  componentUrl: 'js/components/app.html',
  view: {
    xhrCache: false
    // stackPages: true
  },
  notification: {
    title: 'BetaERP'
  },
  toast: {
    closeTimeout: 3000,
    destroyOnClose: true,
    position: 'top'
  },
  routes: routes
})

route.js:

var routes = [{
  path: '/panel-left/',
  panel: {
    componentUrl: 'js/components/panel_left.html'
  },
  options: {
    pushState: false
  }
}, {
  path: '/oferty/',
  componentUrl: 'js/components/oferty.html'
}]

app.html:

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

    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main view-init safe-areas" data-url="/">

      <!-- Initial Page, "data-name" contains page name -->
      <div class="page" data-name="home">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">

            <div class="left">
              <a href="/panel-left/" class="link icon-only">
                <i class="f7-icons fas fa-bars"></i>
              </a>
            </div>

            <div class="title">{{this.$root.nazwaUzytkownika}}</div>

            <div class="right">
              <a @click="$root.sysWyloguj()">
                <span>Wyloguj się</span>
              </a>
            </div>

          </div>
        </div>

        <!-- Scrollable page content -->
        <div class="page-content">

        </div>
      </div>
    </div>
  </div>
</template>
...

oferty.html:

<template>
  <div class="page" data-name="oferty">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">

        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Powrót</span>
          </a>
        </div>

        <div class="title">Oferty</div>

        <div class="right">
          <a href="/" class="link">
            <span>Filtry?</span>
          </a>
        </div>

      </div>
    </div>

    <!-- Scrollable page content -->
    <div class="page-content">

    </div>
  </div>
</template>
...
2

You need to put initial home page to route too https://framework7.io/docs/view.html#initial-page-route

3

I’ve ended up with something like below, since I can’t add componentUrl again in routes - that didn’t work.

var routes = [{
  path: '/',
  pageName: 'home'
},
...
1 Like