如何导航到 Framework7 中的页面答案

【问题标题】：How to navigate to a page in Framework7如何导航到 Framework7 中的页面
【发布时间】：2018-10-10 10:31:22
【问题描述】：

我刚开始使用 Framework7，我想在单击段落时导航到另一个页面。在过去的一个小时里，我尝试了一些东西并用谷歌搜索，但没有运气。

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

当我单击一个段落时，没有任何反应，并且在我运行检查器时也没有错误。我究竟做错了什么？谢谢。

【问题讨论】：

标签： javascript routing html-framework-7

【解决方案1】：

你可以用这个来做到这一点：

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

【讨论】：

非常感谢！起初我有一个跨源错误，但现在我正在运行一个简单的服务器并且它正在工作！干杯！
尼斯 squeekyDave，随时欢迎：D

【解决方案2】：

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

如果@Anis 提供了答案，但它应该适用于该答案，请尝试此操作

【讨论】：

【解决方案3】：

它应该可以使用：app.router.navigate('/preview/')

【讨论】：