How to navigate to a page in Framework7

Question

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.

Here is the code I have in my-app.js:

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/');
 });

When I click a paragraph nothing happens and there are no errors when I run the inspector. What am I doing wrong? Thank you.

Anees Hikmat Abu Hmiad · Accepted Answer · 2019-04-10T16:08:55.947

5

You can do that by using this:

self.app.router.navigate('/preview/', {reloadCurrent: true});

Also make sure that html layout like this:

<div class="view">
    <!-- Initial Page, "data-name" contains page name -->
    <div data-name="preview" class="page">
        <!-- Scrollable page content -->
        <div class="page-content">
           preview page content
        </div>
    </div>
</div>

Update 1: In F7 ver 4 you can use this:

app.views.main.router.navigate('/login/', {reloadCurrent: true});

edited Apr 10 '19 at 16:08

answered Oct 10 '18 at 12:21

Anees Hikmat Abu Hmiad

3,460
2
19
36

Thank you so much! I had a cross origin error at first but now I am running a simple server and its working! Cheers! – squeekyDave Oct 10 '18 at 13:01
Nice squeekyDave, Welcome any time :D – Anees Hikmat Abu Hmiad Oct 10 '18 at 14:39
this path app.views.main.router will return undefined in the newest versions. Something probably changed because when you print the app variable console.log(app.views.main), it returns null or undefined. Plus the main.router does not exist. If you print console.log(app), you can see all that is available and navigate isn't a method anymore. – Grogu Jun 14 '22 at 16:50

score 0 · Answer 2 · answered Oct 10 '18 at 12:37

0

app.mainView.router.navigate('/preview/')

Try this if the answer @Anis offered but its supposed to work that answer

answered Oct 10 '18 at 12:37

Flash

1,105
14
16

score 0 · Answer 3 · answered Dec 19 '18 at 16:41

0

It should work using : app.router.navigate('/preview/')

answered Dec 19 '18 at 16:41

Tripex

41
2

score 0 · Answer 4 · answered Jan 18 '23 at 04:44

To go some specific routes you can use

app.views.main.router.navigate('your route');

If you have a scenario like after create some task and you have to redirect to listing page, where if you use

if(formSubmitSuccessfull){
     app.views.main.router.navigate('your router')
}

It will redirect to the previous page (In this case form create) after redirect to the listing page, When you try to back to the dashboard or other page from listing In this case you have to use

app.views.main.router.back({
                    url: '/your router where you want to go.../',
                    force: true,
                    ignoreCache: true
                })

How to navigate to a page in Framework7

4 Answers4