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文件。
在声明它之后，在其中创建最容易在您访问路线时触发的方法/方法，并将结果保存在可以在路线中访问它的全局变量（例如：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和单页应用程序：预加载所有页面

1 个答案: