【Springboot 入门培训】#7 (Framework7 移动webapp) 页面路由跳转

学习使用routes 路由来进行页面访问，如何定义路由类routes属性与方法引用。掌握routes 路由类的使用就掌握了Framework7 页面之间的访问控制，才能真正的发挥Framework7 组件的优势。

用电脑端在google浏览器下才能看出效果,如果用手机打开有一点慢但是效果非常的棒。

代码演示地址

1 创建路由与 Framework7 主引用

我们使用spring boot 中templates模板的方式来完成第一个Framework7 APP页面跳转功能。将路由类与Framework7 中央组件绑定在一起就是一个全局路由。路由创建过程分为3步，1创建路由类，2设置路由内容，3将路由类装入全局函数中变成全局路由。

1 创建一个routes路由类var routes=[]。
2 创建路由内容，在路由类中设置访问属性var routes=[{name:引用名称,path:元素调用路径,url:http访问url路径}]。

属性	参数	备注
name	路由应用名称	全局调用时可以使用到
path	路由路径	在html元素中使用路径来访问
url	页面路径	服务器访问路径地址

3 创建全局引用在var app=new Framework7（ routes: routes）全局类中加入路由。
4 创建HTML APP 页面元素 app - view - page 三个嵌套的组件。

将路由类与全局引用app进行绑定，绑定后这个路由类中定义的内容就可以全局调用，成为全局路由。

简单来说将路由装入new Framework7（ routes: routes）；就成为局路由。

路由页面

<script type="text/javascript">var routes=[{name: 'page1',//路由应用名称path: '/page1/',//fk7 页面元素访问时路径url: './page/routes1',//spring boot中Controller路径}];var app = new Framework7({// 引入app承载元素el: '#app',//定义app引用名称name: 'zhtapp',// 定义idid: 'zhtapp'routes: routes //将路由信息装入fk7总环境中，全局调用环境});
</script><div id="app"><!-- app 主要视图  --><div class="view view-main view-init" ><!-- app 底部分--><div class="toolbar toolbar-bottom"><div class="toolbar-inner"><!-- app底部选项卡部分 --><a href="/page1/" class="link">转换页面</a></div></div><div class="page-content"><!-- 内容 部分 --><p>这是我第一个app页面</p><a href="/page1/">我好兴奋啊快来点我转换页面</a></div></div></div>

2 创建路由转发Controller容器与转发页设置

在spring boot中定义一个Controller类，在类中可以创建页面转发方法，前台页面通过url来获得转发页面的html页面信息，将获得的html页面信息传回给页面中的路由。Framework7 js中央控制器在通过调用路由的方法将个html信息绑定到app框架中page元素组件，这就是Framework7 js中央控制器在通过路由刷新page组件过程。

1 创建 Controller java代码

@Controller
@RequestMapping("/page")
public class PageController {@RequestMapping("/routes1")public String routes1(ModelMap map) {//路由url获得页面的方法return "/app/routes1";}
}

2 创建被访问 routes1.html页面

<div class="page">这是我第一个页面
</div>

创建访问页面 ：被访问页html元素中一定要包含在 class=“page” < div class=“page”> 中< /div>

在项目templates文件夹下创建有一个routes1页面，在页面中创建一个代 class=“page” 的页面元素（< div class=“page”></ div>）。如果没有这个 class="page"这个页面元素Framework7 组件不加载这个html页面。Framework7 组件是通过class="page"这个元素来判断哪些html元素是Framework7组件元素。

跳转页面必须定义

page，所有信息必须在page组件中，这样Framework7 中央组件才会认为这个跳转页面中的信息是Framework7 组件，在视图组件中显示这个跳转页面内容。

3 页面元素引用路由路径

# 页面元素引用路由路径
<a href="/page1/" class="link">转换页面</a>

3 创建视图组件

视图组件是Framework7中最重要的一个组件，视图可以看成是一个使用的主页面，视图元素中包含三部分，头，底部，page中间。我们是操作视图的引用来进行编码开发的。

每个Framework7 App页面必须要初始化一个主视图组件实例，我们使用这个视图组件来操作页面元素。

初始化2种方法

app.views.create( viewEl, parameters ) - 初始化视图
app.views.get( viewEl ) - 通过 HTML 元素获取 View 实例

从2两种方法中选择一个方法初始化视图组件。

viewEl CSS元素 .view-main 是 UI中必须定义的一个主视图名称
parameters 视图参数，开发者自己可以定义一些视图参数

例子：创建视图

<div id="app"><!-- app 主要视图  --><div class="view view-main view-init" ><div class="page-content">内容</div></div>
</div>
<script type="text/javascript">//创建工具组件
var $$ = Dom7;//创建Framework7 全局组件 app
var app = new Framework7({el:'#app'});//创建视图组件  view-main 主组图元素中class 元素
var view = app.views.create('.view-main', {on:{pageInit: function (){//视图初始化方法}}
});
//直接引用的方法
//var view =  app.views.get('.view-main' );
</script>

获得路由操作对象

在视图对象中获得全局路由操作对象

var router=view.router;//获得这个视图下的路由信息内容

4 操作路由转发页面

使用 router.navigate 的方法访问新页面

创建页面访问方法

//定义页面访问方法
function onpage(){// 路由跳转页面方法router.navigate({name: 'page1',query: {name:'第一个转发页面'},},{ignoreCache: true});
}

router.navigate方法

参数1 路由url基本信息包含三个属性 name,query,params

name：使用的路由名称

query：转发时候使用的参数，后台 Controller容器中获得参数
参数2 转发页面的时候附加功能

router.navigate({},{});

路由调用新页面关系

 <div class="toolbar tabbar-labels toolbar-bottom"><a href="#" class="tab-link tab-link-active"onclick="onpage()">|
function onpage(){   <--------|// 路由跳转页面方法router.navigate({name: 'page1',------------------|query: {name:'第一个转发页面'},    |},{ignoreCache: true});             |
}                                           ||
var routes=[                                |{                                       |name: 'page1',   <--------------------|path: '/page1/',url: './app/routes1',---------------|}                                     |];                                        |
-------------spring boot --------------    |
@Controller                                |
@RequestMapping("/app")                    |
public class ZhtController {               |@RequestMapping("/routes1")    <-------|public String index(Model map) {      return "/app/page1"; ---------------|}                                     |
}                                          |
------------- 新html页面 --------------     |
<div class="page">             <-----------|<div class="page-content">第一个页面</div>
</div>

点击首页

页面效果

示例代码下载
(Framework7 移动webapp) Springboot 入门培训 7 页面路由跳转.zip
百度云
链接：https://pan.baidu.com/s/1rDpcZtdBA6i7vBmYTMwcUA
提取码：1234

5 Thymeleaf页面与Framework7组件混合使用

我们使用了Framework7 中的media-list列表UI来生成的页面。

Spring boot Controller 容器设置

转发方法设置

@RequestMapping("/routes1")public String index(Model map,String name) {map.addAttribute("name", name);//map.addAttribute("list", user.getOne(null));//这部分通过查询数据库获得 ，我为了演示方便直接设置List list=new ArrayList();Map map1=new HashMap();map1.put("istype", "0");//文章的摆放模式（0-标题,1-1图，2-2图）map1.put("tilte", "liunx 操作系统 万字总结 （收藏）");map1.put("username", "傻子不多了");map1.put("readsum", "6442");//阅读数map1.put("messagesum", "12");//评论数Map map2=new HashMap();map2.put("istype", "1");//文章的摆放模式（0-标题,1-1图，2-2图）map2.put("tilte", " (Framework7 移动webapp) Springboot 入门培训 7  页面路由跳转");map2.put("img1", "../static/img/111.png");//图片地址map2.put("username", "zhtbs");map2.put("readsum", "16442");//阅读数map2.put("messagesum", "643");//评论数Map map3=new HashMap();map3.put("istype", "2");//文章的摆放模式（0-标题,1-1图，2-2图）map3.put("tilte", "Java面试者的经历，吐血分享字节跳动的Java面试经验技巧");map3.put("img1", "../static/img/111.png");//图片地址map3.put("img2", "../static/img/22222.jpg");//图片地址map3.put("img3", "../static/img/444.jpg");//图片地址map3.put("username", "csdjava");map3.put("readsum", "12");//阅读数map3.put("messagesum", "0");//评论数list.add(map1);list.add(map2);list.add(map3);map.addAttribute("list",list);return "/app/page1";}

Thymeleaf 页面设置

循环标签与判断标签使用

<div class="page" th:inline="text">
<div class="page-content">
<div class="block-title">[(${name})]</div><div class="list media-list"><ul>     <th:block th:each="user:${list}"><li><th:block th:if="${user.istype}==0"><div class="item-content">[(${user.tilte})].......</div>           </li>   </th:block></ul>
</div>
</div>
</div>

th:each 选好列表内容
th:if 判断列表属性

完成页面代码

<div class="page" th:inline="text"><div class="page-content"><div class="block-title">[(${name})]</div><div class="list media-list"><ul>     <th:block th:each="user:${list}"><li><th:block th:if="${user.istype}==0"><div class="item-content"><div class="item-inner"><div class="item-title-row"><div class="item-text" style="font-size:18px;font-weight:600;color:#000000;padding-bottom:10px;">[(${user.tilte})]</div></div><div class="item-text"><span style="padding-right:20px;">作者：[(${user.username})]</span><span > 阅读量：[(${user.readsum})] 评论数:[(${user.messagesum})]</span></div></div></div></th:block><th:block th:if="${user.istype}==1"><div class="item-content"><div class="item-inner"><div class="row"><div class="item-text col-60" style="font-size:18px;font-weight:600;color:#000000;padding-bottom:10px;">[(${user.tilte})]</div><div class="col-40"><img th:src="${user.img1}" width="100%" height="70px" /></div></div><div class="item-text"><span style="padding-right:20px;">作者：[(${user.username})]</span><span > 阅读量：[(${user.readsum})] 评论数:[(${user.messagesum})]</span></div></div></div></th:block>  <th:block th:if="${user.istype}==2">      <div class="item-content"><div class="item-inner"><div class="item-title-row"><div class="item-text" style="font-size:18px;font-weight:600;color:#000000;padding-bottom:10px;">[(${user.tilte})]</div></div><div class="item-row"><div class="item-cell"><img th:src="${user.img1}" width="98%" height="70px" /></div><div class="item-cell"><img th:src="${user.img2}" width="98%" height="70px" /></div><div class="item-cell"><img th:src="${user.img3}" width="98%" height="70px" /></div></div>           <div class="item-text"><span style="padding-right:20px;">作者：[(${user.username})]</span><span > 阅读量：[(${user.readsum})] 评论数:[(${user.messagesum})]</span></div></div></div></th:block>          </li>   </th:block></div>
</div>

routes navigate方法常用属性

    router.navigate({name: 'page1',query: {name:'第一个转发页面'},},{reloadCurrent: true,reloadPrevious：false});

属性	备注
reloadCurrent ( boolean )	用路由中的新页面替换当前页面，在这种情况下没有动画
reloadPrevious ( boolean )	用路由中的新页面替换历史记录中的上一页
reloadAll ( boolean )	加载新页面并从历史记录和 DOM 中删除所有以前的页面
clearPreviousHistory ( boolean )	重新加载/导航到指定路线后将清除以前的页面历史记录
animate ( boolean )	页面是否应该动画（覆盖默认路由器设置）
history ( boolean )	页面是否应保存在路由器历史记录中
browserHistory ( boolean )	页面是否应保存在浏览器状态。如果您正在使用`browserHistory`，则可以通过此处`false`以防止路由进入浏览器历史记录
ignoreCache ( boolean )	如果设置为`true`那么它将忽略缓存中是否有这样的 URL 并再次使用 XHR 重新加载它
props ( object )	将作为页面组件道具传递的道具
transition ( string )	路由自定义页面过渡名称
openIn ( string )	允许以模态或面板的形式打开页面路由。所以它可以是以下之一：`popup`, `popover`, `loginScreen`, `sheet`,`panel`