Framework7——如何使用路由load或back页面

在Framework7中也是可以使用路由的，和Angularjs的路由有些不同，详细信息可以参考文档：http://docs.framework7.cn/Index/router_api.html，接下来说一下如何使用。

使用方法

var mainView = myApp.addView('.view-main');//加载页面你得先需要一个视图
mainView.router.load(options);//把一个页面加载到当前视图
mainView.router.back(options);//这个方法会触发一个反向的动画并回到上一个页面，也就是浏览历史上的回退

options常用参数列表

参数	类型	说明
url	string	需要加载的页面的URL
pageName	string	需要加载的页面的名称(data-page)。只用在内联页面(DOM cached)。
context	object or array	渲染Template7 模板时需要的上下文。这里有更多说明Template7 Pages。
force	boolean	可选的。只对 back 方法有效。如果设置为 true，那么会忽略浏览历史中的上一个页面，而是直接加载指定的页面。

使用举例

detaile.html
<div>
    姓名：<span>{{name}}</span>
    性别：<span>{{sex}}</span>
    年龄：<span>{{age}}</span>
</div>

mainView.router.load({  //加载单独页面page
    url:'f7/detaile.html',//页面的url
    context:{//传入detail页面的数据，可以在页面中渲染
        name:'张三',
        sex:'男',
        age:'30'
    }
});

mainView.router.load({  //加载内联页面page
    pageName:'detaile',//页面的data-page值
    context:{//传入detail页面的数据，可以在页面中渲染
        name:'张三',
        sex:'男',
        age:'30'
    }
});

mainView.router.back();//简单的返回上一个页面，不需要参数

mainView.router.back({  //返回指定页面，一般用于返回到主页
    pageName:'detaile',//页面的data-page值
    force:true//注意此参数back方法专用
});

注意：在使用路由(load/back)内联页面时，一定要在var mainView = myApp.addView('.view-main');时添加domCache: true，如：var mainView = myApp.addView('.view-main',{domCache: true});