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

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

声明全局或辅助 js 文件。
声明后，在其中创建method/methods，访问路由时最容易触发，并将结果保存在全局变量（例如：aboutUsDataCache）中，可以在路由中访问它。
将所有 ajax 请求路由操作替换为为其创建的方法。
添加条件来检查 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()
                  }
    },
  },

此示例来自真实项目，我尝试删除所有不需要的代码以使其清晰可见，以便注意：

本例使用WebPack，让大家看导入导出有时间..
我从函数中删除了 promise 以使代码示例清晰。
因为你需要在开始时触发所有请求，所以你需要调用索引路由中的所有方法，这样当你像我们的例子一样转到任何页面时，你会看到数据被缓存并且不会触发请求。

祝你好运

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

Framework7 and Single Page Application: preload all pages

html

javascript

css

jquery

html-framework-7