pushState 问题 Framework7 v3.5.2 不加载视图

Question

我已经阅读了有关此问题的所有问题，但没有找到任何解决方案。

我正在使用 current 最新版本的 Framework7 (3.5.2)，我正在尝试实现 pushState 语句以便在 [=33] 上启用后退按钮=] 设备。

在我的 app.js 我写了这个：

const app = new Framework7({
    root: '#app',
    name: conf.appName,
    version: conf.version,
    id: conf.id,
    theme: 'auto',
    panel: {
        swipe: 'left',
    },
    view: {
        pushState: true,
        //pushStateRoot: '',
        //pushStateSeparator: '#!',
      }
    })

如果我设置 pushState: false，应用程序可以正常运行。如果我设置 true，应用程序会给我一个空白页（我试过使用 xampp、electron 和 cordova，我得到了相同的结果）。

我错过了什么吗？ Framework7 文档太混乱了..

如果 pushState 有问题，还有其他解决方案可以在 android 上使用 Framework7 上的后退按钮吗？

谢谢

Answer 1

此代码将提供控制后退按钮操作的能力，对于此示例，如果您在主页中，您将获得后退操作并退出应用程序....

document.addEventListener("deviceready", function () {
    /* Set Android Back Button  */
    document.addEventListener("backbutton", function(){
        mainView.router.back();

        // Exit from app if user press back in home page
        if($$('.page-current').data('name') == 'home'){
            navigator.app.exitApp();
        }
    }, false);
});

但是，我认为问题不在于处理后退按钮，我认为你需要做一些这些事情，它可能会解决问题：

1) 将 pushState 添加到 router.navigate(url, options) 中的选项，或者将 data-push-state="true" 添加到视图包装器，如下所示：<div class="view" ... data-push-state="true"> .

2) 尝试在后退按钮侦听器中添加 reloadCurrent 或 reloadPrevious。

依赖于我之前的错误，当我在返回时重新加载页面时问题得到解决，因为它会刷新 dom 对象并获取数据，特别是如果数据是从 ajax 加载的。 ..

Answer 2

看看这个：

view: {
    pushState: true,
    pushStateSeparator: '#',
    pushStateOnLoad: false
}

您必须删除 pushStateRoot 参数，这是一个很好的决定。但您还必须插入 pushStateSeparator，这样您就可以在右侧导航 url（不带“#”）。您也需要使用 pushStateOnLoad。这个让你"Disable to ignore parsing push state URL and loading page on app load."

有关更多信息，请参阅 documentation。

Answer 3

我使用了如下结构。后退按钮正常工作。

在app.js。（添加 pushState 和 pushStateOnLoad）

..
view: {
        stackPages: true,
        pushState: true,
        pushStateOnLoad: false
    },
..

添加data-url="/#!"到"index.html" （我只是为 index.html 添加的。我没有为其他页面添加。）

<div class="view view-main view-init safe-areas" data-master-detail-breakpoint="800" data-url="/#!">
...
</div>

例如router.js文件中的index.html定义如下。我这里没有做任何改动。

var routes = [
  // Index page
  {
    path: '/',
    componentUrl: './index.html',
    name: 'home',
  },
...
]

Answer 4

我正在使用 vue + framework 7，这是我通过增强@epilurzu 答案得到的答案

如果您使用 framework7 CLI 生成项目，您可能会得到 app.vue 属于 components 文件夹，然后您只需将其编辑为下面的详细信息。

<template>
  <f7-app :params="f7params" >
    <f7-view main class="safe-areas" url="/"></f7-view>
  </f7-app>
</template>
<script>
  import routes from '../js/routes.js';
  export default {
    data() {
      return {
        f7params: {
          name: 'SignsIS App',
          theme: 'auto', 
          routes: routes,
          view:{
            pushState: true,
            pushStateSeparator: '#',
            pushStateOnLoad: false
          } 
        }
      }
    },
    methods: {
    },
    mounted() {
    }
  }
</script>

然后运行在模拟器中

pushState 问题 Framework7 v3.5.2 不加载视图

pushState problem Framework7 v3.5.2 doesn't load the view

javascript

html-framework-7