当前位置 博文首页 > zhtbs的博客：(Framework7 移动webapp) Springboot 入门培训 7
? 学习使用routes 路由来进行页面访问，如何定义路由类routes属性与方法引用。掌握routes 路由类的使用就掌握了Framework7 页面之间的访问控制，才能真正的发挥Framework7 组件的优势。
用电脑端在google浏览器下才能看出效果,如果用手机打开有一点慢但是效果非常的棒。
代码演示地址
? 我们使用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 | 页面路径 | 服务器访问路径地址 |
将路由类与全局引用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',
// 定义id
id: '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>
在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>
在项目templates文件夹下创建有一个routes1页面，在页面中创建一个代 class=“page” 的页面元素（< div class=“page”></ div>）。如果没有这个 class="page"这个页面元素Framework7 组件不加载这个html页面。Framework7 组件是通过class="page"这个元素来判断哪些html元素是Framework7组件元素。
跳转页面必须定义
page，所有信息必须在page组件中，这样Framework7 中央组件才会认为这个跳转页面中的信息是Framework7 组件，在视图组件中显示这个跳转页面内容。cs