title: How to navigate to a page in Framework7
body: <p>I am just starting with Framework7 and I want to navigate to another page when a click a paragraph. I tried a few things and googled for the past hour but no luck.</p>
  
  <p>Here is the code I have in <strong>my-app.js</strong>:</p>
  
  <pre><code>var $$ = Dom7;
  
  var app = new Framework7({
      // App root element
      root: '#app',
      // App Name
      name: 'My App',
      // App id
      id: 'com.myapp.test',
      // Enable swipe panel
      panel: {
        swipe: 'left',
      },
      view : {
          stackPages: true
      },
      // Add default routes
      routes: [
        {
          name: 'about',
          path: '/about/',
          url: 'about.html',
        },
        {
          name: 'index',
          path: '/index/',
          url: 'index.html'
        },
        {
          name: 'preview',
          path: '/preview/',
          url: './preview.html'
        },
      ],
      // ... other parameters
    });
  
   var mainView = app.views.create('.view-main');
   $$('p').on('click', function(){
       mainView.router.navigate('/preview/');
   });
  </code></pre>
  
  <p>When I click a paragraph nothing happens and there are no errors when I run the inspector.
  What am I doing wrong?
  Thank you.</p>