如何在Framework7中导航到页面

时间:2018-10-10 10:31:23

标签: javascript routing html-framework-7

我只是从Framework7开始,我想单击一个段落时导航到另一页。我尝试了一些尝试,并在过去一个小时内用Google搜索,但是没有运气。

这是我在 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/');
 });

单击段落时,没有任何反应,运行检查器时也没有错误。 我究竟做错了什么? 谢谢。

3 个答案:

答案 0 :(得分:3)

您可以使用以下方法做到这一点:

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

还要确保这样的html布局:

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

更新1:在F7版本4中,您可以使用此功能:

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

答案 1 :(得分:0)

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

如果答案@Anis提供了答案,但应该可以解决该问题

答案 2 :(得分:0)

它应该使用:app.router.navigate('/preview/')