Framework7实现路由跳转

Framework7 是一个开源免费的框架可以用来开发混合移动应用(原生和HTML混合)或者开发 iOS & Android 风格的WEB APP。

由于Framework7是通过ajax加载新页面,因此Framework7属于单页面编程用法。比如:

1
<a href="index.html">Go to About page</a>

当我们点击这个链接的时候,Framework7会通过Ajax获取 index.html,解析它的内容,然后把它实时插入到DOM中,并且做一个动画切换到这个新页面。因此在默认情况下页面路由是不会发生变化的,但是在个别特例时候我们需要路由变化实现页面跳转。

实现路由跳转的方式官方实例化方法有以下几种:

ajaxLinks参数

初始化应用(英文)| 初始化应用(中文)时候传递不同的 ajaxLinks 参数。
关于ajaxLinks参数的官方说明:

参数 类型 默认值 说明
router string undefined 指定哪些链接需要用ajax加载,默认情况下(当为undefined时)Framework7 会使用ajax加载所有的链接。你可以通过设置一个CSS选择器来指定需要通过Ajax加载的链接,比如 “a.ajax” - 只有class 为 “ajax” 的链接。

router参数

同时也可以配置router参数实现自己的路由方式。
关于router参数的官方说明:

参数 类型 默认值 说明
router boolean true 如果你有自己的路由实现,你可以禁用默认的路由

externalLinks参数

为每个需要实现路由跳转的链接添加 external class类名,🌰:<a href="index.html" class="external">。同时正确href值的链接(比如是空的或者是 #)也不会实现ajax加载新页面。当然后者在常见实际项目中是很少出现的。
关于externalLinks参数的官方说明:

参数 类型 默认值 说明
externalLinks string ‘.external’ 不应该被 Framework7 管理的链接的CSS选择器。比如 “.external” 会匹配到这样的链接 <a href="somepage.html" class="external"> (因为它有 “external” 类)

pushState参数

关于pushState相关参数的官方说明:

参数 类型 默认值 说明
pushState boolean false 如果你开发web app(而不是通过PhoneGap封装的混合应用),那么这个功能将很有用(浏览器的URL将会看上去像这样 "http://my-webapp.com/#/about.html")。用户可以通过浏览器默认的前进后退按钮来操作。
pushStateSeparator string ‘#!/‘ push state 时候在URL中使用的分隔符,如果改成 “#page/“,那么你的url将会像这样 "http://myapp.com/#page/about.html"
pushStateRoot string undefined Push state URL根路径, 比如 "http://my-app.com/". 只有当你把 pushStateSeparator 设置为空(“”)时才有效。
pushStateNoAnimation boolean false 如果设置为 false,那么会继承当前 View 的 animatePages 参数。如果设置为 true,那么页面切换的时候将没有动画效果。
pushStatePreventOnLoad boolean true 如果开启,则应用程序加载时的第一个弹出状态事件会被忽略,因为它可能会阻止不必要的问题。 但是当你使用异步加载框架(如Require.js)初始化应用程序时,可以禁用它