Framework7 v5.7 是否支持类似v1 inline-pages的单文件同视图多页面实现？

问题背景 #

作为Framework7初学者，已知早期v1版本支持**inline-pages（内联页面）**能力，可在单个view中声明多个页面、将所有页面整合在同一个HTML文件中，想要确认v5.7版本是否存在同类实现方式。早期v1的典型实现结构是在主view的.pages容器下直接堆叠多个带data-page标识、cached缓存类的静态.page节点，无需拆分独立的HTML文件。

实现结论与适配说明 #

Framework7 v5.7 完全支持同类的单文件内联多页面能力，核心思路和早期版本一致，只是对DOM规范、缓存逻辑、路由匹配规则做了迭代调整，没有取消内联多页面的支持
具体和v1实现的差异点：

• 不再使用data-page属性标记页面身份，而是给每个页面配置独立的name标识，作为路由匹配的核心依据
• 原来手动添加的cached缓存类，被替换为路由配置项里的keepAlive: true，效果完全等效，不需要手动在DOM节点上添加类名
• 所有页面依然可以全部整合在单个HTML文件中，不需要拆分独立的远程HTML文件做页面加载

v5.7 版本适配的示例代码 #

<html>
  <head>
    <!-- 引入对应v5.7版本的Framework7 CSS、JS本地资源 -->
  </head>
  <body>
    <div id="app">
      <!-- 主视图容器 -->
      <div class="view view-main"></div>
    </div>

    <script>
      // 初始化Framework7实例，配置内联页面对应路由
      const app = new Framework7({
        el: '#app',
        // 配置主视图
        views: [
          {
            name: 'main',
            el: '.view-main'
          }
        ],
        // 内联页面路由配置，所有页面的DOM直接在配置中定义，无外部文件依赖
        routes: [
          // 首页（无缓存）
          {
            name: 'index',
            path: '/',
            render: () => `
              <div class="page" name="index">
                <div class="page-content">
                  <p>Home page</p>
                </div>
              </div>
            `
          },
          // 关于页（开启缓存，等效v1的cached类效果）
          {
            name: 'about',
            path: '/about/',
            keepAlive: true,
            render: () => `
              <div class="page" name="about">
                <div class="page-content">
                  <p>About page</p>
                </div>
              </div>
            `
          },
          // 服务页（开启缓存）
          {
            name: 'services',
            path: '/services/',
            keepAlive: true,
            render: () => `
              <div class="page" name="services">
                <div class="page-content">
                  <p>Services page</p>
                </div>
              </div>
            `
          }
        ]
      })
    </script>
  </body>
</html>

注意事项 #

如果习惯早期版本直接静态堆叠DOM的写法，也可以跳过render函数，直接把所有.page节点静态写在主view的.pages容器下，只要在路由配置中声明对应路径和页面名称，同样能实现内联页面的效果。但要注意不能完全照搬v1的DOM标记，没有对应路由声明的静态页面会被v5.7的路由系统忽略，无法正常触发导航和展示。

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