在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({ //加載單獨頁面pageurl:'f7/detaile.html',//頁面的urlcontext:{//傳入detail頁面的數據，可以在頁面中渲染name:'張三',sex:'男',age:'30'} }); mainView.router.load({ //加載內聯頁面pagepageName:'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});

總結

以上是生活随笔為你收集整理的Framework7——如何使用路由load或back页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。