Framework7运行时如何获取所有非当前页面的HTML内容？

方案1：路由配置为内联content的页面直接读取 #

• 直接从Framework7实例的routes配置里提取对应路由的content属性即可，示例代码：

// 替换为你项目中实际获取Framework7全局实例的方式
const f7 = window.f7 || this.$f7;
// 匹配目标页面对应的路由配置
const targetRoute = f7.routes.find(route => route.path === '/your-target-page-path/');
// 直接获取HTML内容
const targetPageHtml = targetRoute.content;

如果你的路由content配置为返回HTML的函数，执行targetRoute.content()即可拿到结果

方案2：路由配置为外部文件（url/componentUrl字段加载）的页面 #

• 不需要调用Framework7的路由加载逻辑，直接用原生请求拉取对应HTML文件内容即可，不会触发视图渲染相关逻辑：

// 替换为目标页面在路由中配置的实际文件路径
const targetPagePath = '/pages/target-page.html';
fetch(targetPagePath)
  .then(res => res.text())
  .then(htmlContent => {
    // htmlContent即为目标页面的完整HTML内容，直接存入变量做后续处理即可
    const targetPageHtml = htmlContent;
    // 后续处理逻辑写在此处
  })

如果需要多次获取同一页面内容，可以自行新增本地缓存对象存储已拉取的页面内容，避免重复请求

额外适配说明 #

如果你的项目使用Vue/React版本的Framework7组件式开发，要获取组件渲染后的HTML，可以直接用对应框架的服务端渲染工具方法，用h函数创建目标组件的虚拟DOM后，调用renderToString方法转成HTML字符串即可，不需要把组件挂载到真实视图上。

内容的提问来源于stack exchange，提问作者chernish2