如何使用jQuery实现Framework7混合移动应用的页面导航？

DevOps 小满

2026-5-26

使用jQuery结合Framework7实现带校验的页面导航

Hey there! Since you're working with Framework7, you shouldn't rely on plain jQuery or vanilla JS location changes for navigation—Framework7 has its own built-in routing system that preserves your app's state, transitions, and history. Here's the right way to add validation and navigation:

第一步：调整你的按钮HTML

保留按钮样式，移除href属性即可：

<a class="button button-fill button-login">LOGIN</a>

第二步：绑定点击事件并添加校验逻辑

假设你已经初始化了Framework7实例（通常是var app = new Framework7();），用jQuery绑定按钮的点击事件，先做校验，再用Framework7的路由方法跳转：

// 确保代码在Framework7初始化后执行，或者放在DOM就绪事件里
$(function() {
  $('.button-login').on('click', function() {
    // 这里替换成你的实际校验逻辑
    var isFormValid = true;
    // 示例：检查用户名和密码输入框是否为空
    // isFormValid = $('#username').val().trim() !== '' && $('#password').val().trim() !== '';

    if (isFormValid) {
      // 使用Framework7的路由导航方法（官方推荐的单页导航方式）
      app.views.main.router.navigate('/homepage/');
    } else {
      // 校验不通过时的提示，用Framework7的Toast组件更贴合应用风格
      app.toast.show({
        text: '请填写完整的登录信息！',
        position: 'center',
        closeTimeout: 2000
      });
    }
  });
});

关键细节说明：

为什么不用window.location.href？ 直接修改location会重载页面，破坏Framework7单页应用的特性（比如过渡动画、页面状态保存），而router.navigate()是官方专门为单页导航设计的方法。
动态生成的按钮？ 如果按钮是后续动态添加到DOM的，改用事件委托更可靠：
```
$(document).on('click', '.button-login', function() {
  // 同样的校验和跳转逻辑
});
```
自定义视图场景？ 如果你的目标页面不在默认的main视图里，替换成对应的视图实例即可，比如app.views.myCustomView.router.navigate(...)。