I need help with Routes

Questions
1

Hello,

I try to edit the routes for Core & they never worked for the edited version. I try your website & they still do not work. The example routes work but when I add a custom route it doesn’t work, as when I click on the tab it does not go to the tab. I will post my code below.

Thanks
Zephyr

Index








Framework7

Components
</body>
</html>

routes.js

var view1 = app.views.create('.view-1', {
routes: [
{
  path: '/test/',
  url: './pages/test.html',
},
{
  path: '/user/',
  url: './pages/user.html',
},
],
});

test.html

<template>
<div class="page">
<div class="page-content">
  <div class="block block-strong">
    <p class="row">
      <a href="#" class="col button button-fill" @click="openDemo1">One group</a>
      <a href="#" class="col button button-fill" @click="openDemo2">Two groups</a>
    </p>
    <p>
      <a href="#" class="button button-fill" @click="openGrid">Test</a>
    </p>
  </div>
</div>
</div>
</template>
2

There is no routes.js code.

3

my apologizes, I was very tired & forgot it. I fixed it.

4

So you are creating a new view, aside from view-main?
your current code doesn’t show how you try to navigate in view1. Can you share the full code?

5

hello,

I couldn’t figure out how to get the html code to show so I put it into a github gist.

GitHub Gist

Thanks
Austin

6

Hi,
if this is your full html layout, you need to read the docs.

<div id="app">
    <div class="block-title searchbar-found">Components</div>
          <div class="list components-list searchbar-found">
            <ul>
              <li>
                <a class="item-content item-link" href="/test/">
                  <div class="item-media"><i class="icon icon-f7"></i></div>
                  <div class="item-inner">
                    <div class="item-title">test</div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
  </div>

Please read carefully the basic f7 layout.

https://framework7.io/docs/app-layout.html

You are missing the view tag, page tag, nav toolbars, etc

    <!-- App root element -->
    <div id="app">
      <!-- Statusbar overlay -->
      <div class="statusbar"></div>

      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Initial Page, "data-name" contains page name -->
        <div data-name="home" class="page">

          <!-- Top Navbar -->
          <div class="navbar">
            <div class="navbar-inner">
              <div class="title">Awesome App</div>
            </div>
          </div>

          <!-- Toolbar -->
          <div class="toolbar">
            <div class="toolbar-inner">
              <!-- Toolbar links -->
              <a href="#" class="link">Link 1</a>
              <a href="#" class="link">Link 2</a>
            </div>
          </div>

          <!-- Scrollable page content -->
          <div class="page-content">
            <p>Page content goes here</p>
            <!-- Link to another page -->
            <a href="/about/">About app</a>
          </div>
        </div>
      </div>
    </div>

If you use the f7 docs layout you dont need to create a new view. just use view-main

var mainView = app.views.create('.view-main');

Please read here:

https://framework7.io/docs/init-app.html