I need help with Routes


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.






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


<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>
      <a href="#" class="button button-fill" @click="openGrid">Test</a>

There is no routes.js code.

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

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?


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

GitHub Gist


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">
                <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>

Please read carefully the basic f7 layout.


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>

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

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

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: