CODEWITHSUNDEEP
javascriptrouteshtml-framework-7
squeekyDave
squeekyDave

Reputation: 962

How to navigate to a page in Framework7

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.

Upvotes: 5

Views: 9225

Answers (5)

Dev
Dev

Reputation: 441

On f7 v8.3.2 (framework7-svelte) try:

app.f7.views.main.router.navigate("/route");

Don't forget to import app

import {app} from "framework7-svelte";

Upvotes: 0

AbdulmateenChitrali
AbdulmateenChitrali

Reputation: 399

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
                })

Upvotes: 0

Anees Hikmat Abu Hmiad
Anees Hikmat Abu Hmiad

Reputation: 3560

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

Upvotes: 5

Tripex
Tripex

Reputation: 41

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

Upvotes: 0

Flash
Flash

Reputation: 1125

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

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

Upvotes: 0

Related Questions