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

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

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

---

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

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

声明全局或辅助js文件

声明后，在其中创建一个或多个方法，在访问route时最容易触发该方法，并将结果保存在全局变量（例如：aboutUsDataCache）中，该全局变量可以在route中访问该方法

替换所有ajax请求将操作路由到为其创建的方法

添加条件来检查aboutUsDataCache是否为空，如果不为空，这意味着我们触发请求并拥有数据，并且我们处于SPA中，这样我们就不会再次访问该方法

来自真实项目的示例： 我有main-config.js，它在路由之前加载，代码如下：

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

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

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

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

在routes中，有以下代码：

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

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

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

此示例使用Web包，以便您在某个时间看到导入和导出

我从函数中删除了使代码示例清晰的承诺

因为您需要在开始时触发所有请求，所以您需要调用索引路由中的所有方法，这样当您转到像我们的示例一样的任何页面时，您将看到数据被缓存，并且请求不会触发

祝你好运