Framework7 和单页应用程序：预加载所有页面

Question

我正在使用 Framework7 构建一个 Web 应用程序。

https://framework7.io/

我知道 Framework7 提供路由 API 来浏览 HTML 页面。

https://framework7.io/docs/view.html#router-api-methods-properties

据我所知，这些页面是通过 AJAX 请求动态加载的。是否可以预加载所有这些并且之后没有任何 AJAX 请求？我想构建一个单页应用程序 (SPA)，其中所有数据（HTML 页面、CSS 和 JavaScript 代码）都在启动时加载

Answer 1

我认为他们没有像您的问题那样的直接解决方案，因为每条路线都会在您访问它时触发请求，但是您可以尝试通过执行此技巧来解决您的问题：

1. 声明全局或帮助 js 文件。
2. 声明后，在其中创建访问路由时最容易触发的方法/方法，并将结果保存在全局变量中（例如：aboutUsDataCache），该变量可以在路由中访问。
3. 将所有 ajax 请求路由操作替换为为其创建的方法。
4. 添加条件来检查aboutUsDataCache是​​否为空，如果不为空则表示我们触发请求并且有数据并且我们在SPA中，因此我们不会再次访问方法。

来自实际项目的示例： 我有 main-config.js，它在路由之前加载并且有这个代码：

module.exports.tmpAppCache = {
    fullCadaverList: false,
    fullImagesList: false,
    fullVideosList: false,
    fullPdfList: false,
};

我有 ajax-helper.js 文件，它也在路由之前加载并且有方法 像这样：

export function getFullPdfList() {
 // Your ajax request here
}

在路线中有这个代码：

  {
    path: '/pdf/',
    async: function (routeTo, routeFrom, resolve, reject) {
      if(globalObject.tmpAppCache.fullPdfList !== false){
        resolve(
            {
              component: pdfPage,
            },
            {
              context: {
                data: globalObject.tmpAppCache.fullPdfList
              }
            }
        );
      }else{ getFullPdfList()
                  }
    },
  },

这个来自真实项目的例子，我尝试删除所有不需要的代码以使其清晰，以便有一些注释：

1. 这个例子使用了WebPack，让你看到import和export的时候..
2. 我从函数中删除了 promise，以使代码示例清晰。
3. 由于需要在开始时触发所有请求，因此需要调用索引路由中的所有方法，这样当您像我们的示例一样进入任何页面时，您都会看到数据被缓存并且不会触发请求。

祝你好运