javascript - Framework7 和单页应用程序 : preload all pages

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
}

在 route 有这样的代码:

  {
    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，以便您在一段时间内了解导入和导出..
2. 我从函数中删除了 promise 以使代码示例清晰。
3. 由于您需要在开始时触发所有请求，因此您需要调用索引路由中的所有方法，这样当您转到我们示例中的任何页面时，您会看到数据已缓存并且不会触发请求。

祝你好运