关于f7路由跳转有些问题，我希望得到一些解决办法

Questions
1

我是从网络上获取到f7的，从示例demo上看f7非常完美，但是现在有一个问题是关于路由机制，现在我通过ajax获取到了下一个页面的html模版，js模版，style模版，我想通过f7的路由平滑的过度到新的页面，我需要怎么去封装这个新页面？这个比较理想的方案是，我把所有的视图页面封装成一个个独立的模块，然后缓存在客户端，这个模块包含js模块和html模块，当我访问某一个模块的时候我把html模块拿出来追加或者替换到当前页面，然后执行js模块，所以我想问一下像这种情况我应该怎么用f7来完成我的业务

2

这里有个坑，就是跨域，为了安全底层就只当做字符串处理。你走太深会卡住。所以将模板和函数单独加载比较稳妥，函数肯定不能用直接解析执行的方式，太不安全

3

从本质上ajax只在传递字符串，而函数声明应该是二进制参数(未证实)，传递的只是对象的clone string

4

仔细看了一下你的问题，你是想打断F7的运作机制修改路由加载中ajax获得的字符串么？
想了半天没啥太好的方法，这个你参考一下
首先保证所有ajax请求最终都是通过F7.request或app.request完成
Framework7.request.setup({
beforeSend: function(){
/判断提交/
},
success: function(){
/改造返回/
},
});

5

非常感谢你的解答，我是想把每一个模块像小程序的页面一样封装成一个独立的模块，同时为了减少请求数把模版脚本通过一次请求返回到前台，然后结合f7的前台处理完成整个业务

7

f7的路由是支持这样的，用componenturl处理，siglefilecomponent可以参看样例
不过如果完全平滑过渡工作量还是很大的，

除了上面说的还可以在componentrul 支持的异步加载中进行判断然处理后创建route进行加载

模板的创建方式还是很灵活的，如果需要通过请求完成可以用local storage缓存，如果想本地文件缓存，进行本地文件的读写都比较麻烦可以参考，不过不太清楚你的情况是浏览器还是app，要注意浏览器支持

如果cordova完全可以将模板用文件的方式编写就像vue，直接打包

8

非常感谢，你的回答给了我很大的帮助，有这个想法是想开发浏览器应用然后内嵌第三方应用，尽量让用户体验接近小程序，类似pwa。

9

我现在尝试了一种方案就是在页面定义代码模块和js模块，请求后台代码把对应模块内容解析出来然后替换到当前页面内，就是页面切换的时候感觉非常差，f7的页面切换就非常不错，但是我看api发现没有这方便的东西，想来是不允许这么做的。

10

看起来你是思路弄反了。
应该是在路由异步处理中将所有要准备的东西处理和拼装成routes然后引导

routes = [
  {
    path: '/foo/',
    async(routeTo, routeFrom, resolve, reject) {
      if (/*这里通过routeTo进行路由判断*/) {
          /*这里进行数据请求、解析或者routes拼装,然后生成mycompnent*/
        resolve(
               { 
                   path：'/someapppage/',
                    component: mycomponent
          })
      } else {
        resolve({ url: 'anypage.html' })
      }
    }
  }
]

上面个这个方案也可以你自行拼装然后在异步路由中截获，加载自己拼装的route
关键是无论如何都要使用异步路由

另一个方案是如果你先知道数据请求的路径可以用

var view = app.views.create('.view-1', {
  // These routes are only available in this view
  routesAdd: [
    route1，route2 ...
  ],
})

不过这个方法要注意添加的route只有在当前页有效，不会写入app的routes