Ad

Framework 7 Pages Not Loaded

I tried to create a web-app using Framework7 core (without node, React, Vue).

I found that clicking the tabs at the bottom of index.html the pages weren't showed.

Here you can see my files (from a framework7 template).

I don't understand why they don't load dynamically.

  <!-- Catalog View -->
  <div id="view-catalog"  class="view view-init tab" data-view="catalog" data-url="/catalog/">
    <!-- Catalog page will be loaded here dynamically from /catalog/ route -->
  </div>

  <!-- Settings View -->
  <div id="view-settings" class="view tab">
    <!-- Settings page will be loaded here dynamically from /settings/ route -->
  </div>

Routes Array:

routes = [
  {
    path: '/',
    url: '../pages/index.html',
  },
  {
    path: '/about/',
    url: '../pages/about.html',
  },
  {
    path: '/catalog/',
    componentUrl: '../pages/catalog.html',
  },
  {
    path: '/product/:id/',
    componentUrl: '../pages/product.html',
  },
......
]
Ad

Answer

Your issue in routes only, you need to change your route from this

  {
    path: '/catalog/',
    componentUrl: '../pages/catalog.html',
  },
  {
    path: '/product/:id/',
    componentUrl: '../pages/product.html',
  },

to this:

  {
    path: '/catalog/',
    componentUrl: './pages/catalog.html',
  },
  {
    path: '/product/:id/',
    componentUrl: './pages/product.html',
  },

and its will work perfect, when you using .. you will back one step more, so that you will not find a page, by using . you will access web directory direct...

Ad
source: stackoverflow.com
Ad