Framewrok7 - 使用prerouter阻止路由器默认加载行为（跳到登录页为例）

2016-08-27 发布：hangge 阅读：2624

1，prerouter介绍
（1）prerouter 回调函数可以在 Framework7 初始化的时候设置。
（2）这个回调函数可以用来阻止路由器默认的加载/返回行为，让我们可以自己去加载其他页面，重定向，或者做任意需要的操作。
（3）比如我们在用户访问某些页面的时候可以去检查他是否登录，如果未登录就跳转到登录页面。

// 初始化 app
var myApp = new Framework7({
      preroute: function (view, options) {
        //后一个判断条件是为了防止无限循环调用
        if (!userLoggedIn && options.url != 'login.html') {
            view.router.loadPage('login.html'); //改为加载登录页面
            return false; //阻止原来的路由
        }
    }
});

2，样例说明
（1）默认情况下用户登录状态是 true。点击“跳转...”链接即可打开“关于”页面。

（2）如果先点击“取消登录”链接，将用户登录状态改为 false。

（3）这时点击“跳转...”链接，默认路由加载行为会被拦截。改成加载登录页面。

（4）点击登录后，登录状态又改回 true，并退回之前的页面。这时跳转到“关于”页面也是正常的了。

3，样例完整代码
（1）my-app.js

// 初始化 app
var myApp = new Framework7({
      preroute: function (view, options) {
        //后一个判断条件是为了防止无限循环调用
        if (!userLoggedIn && options.url != 'login.html') {
            //myApp.hideToolbar('.tabbar'); //隐藏底部工具栏
            //myApp.hideNavbar('.navbar'); //隐藏顶部导航栏
            view.router.loadPage('login.html'); //改为加载登录页面
            return false; //阻止原来的路由
        }
    }
});

//记录用户登录状态
var userLoggedIn = true

// 为便于使用，自定义DOM库名字为$$
var $$ = Dom7;

// 添加视图
var mainView = myApp.addView('.view-main', {
  // 让这个视图支持动态导航栏
  dynamicNavbar: true
});

//取消登录状态链接点击
$$('.user-logout').on('click', function () {
    userLoggedIn = false; //取消登录状态
});

//登录页面初始化
$$(document).on('pageInit', '.page[data-page="login"]', function (e) {
  //登录链接点击
  $$('.user-login').on('click', function () {
      userLoggedIn = true; //设置登录状态
      mainView.router.back(); //回到前一个页面
  });
})

（2）index.html（首页）

<body>
  ...
  <div class="statusbar-overlay"></div>
  <!-- 所有的Views视图 -->
  <div class="views">
    <!-- 主视图（需要有"view-main"样式） -->
    <div class="view view-main">
      <!-- 顶部导航栏 -->
      <div class="navbar">
        <div class="navbar-inner">
          <!-- 标题元素（为了让页面切换时标题文字有滑动效果，添加sliding样式） -->
          <div class="center sliding">hangge.com</div>
        </div>
      </div>
      <!-- 页面容器（Pages container）由于我们使用了固定位置的navbar和toolbar，
            所以这里添加额外样式（navbar-through和toolbar-through）-->
      <div class="pages navbar-through toolbar-through">
        <!-- 首页, "data-page" 里设置页面名字 -->
        <div data-page="index" class="page">
          <div class="page-content">
            <div class="content-block">
              <p><a href="about.html" class="open-about">跳转到“关于页面</a></p>
              <p><a href="#" class="user-logout">取消登录状态</a></p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
  ...
</body>

（3）about.html（关于页）

<div class="navbar">
  <div class="navbar-inner">
    <div class="left">
      <a href="#" class="back link">
        <i class="icon icon-back"></i>
        <span></span>
       </a>
    </div>
    <div class="center sliding">关于</div>
    <div class="right">
    </div>
  </div>
</div>
<div class="pages">
  <div data-page="about" class="page">
    <div class="page-content">
      <div class="content-block">
        <p>hangge.com - 做最好的开发者知识平台</p>
      </div>
    </div>
  </div>
</div>

（4）login.html（登录页）

<div class="navbar">
  <div class="navbar-inner">
    <div class="left">
    </div>
    <div class="center sliding">登录</div>
    <div class="right">
    </div>
  </div>
</div>
<div class="pages">
  <div data-page="login" class="page">
    <div class="page-content">
      <form>
        <div class="list-block">
          <ul>
            <li class="item-content">
              <div class="item-inner">
                <div class="item-title label">用户名</div>
                <div class="item-input">
                  <input type="text" name="username" placeholder="输入用户名...">
                </div>
              </div>
            </li>
            <li class="item-content">
              <div class="item-inner">
                <div class="item-title label">密码</div>
                <div class="item-input">
                  <input type="password" name="password" placeholder="输入密码...">
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-block">
          <ul>
            <li><a href="#" class="item-link list-button user-login">登录</a></li>
          </ul>
        </div>
      </form>
    </div>
  </div>
</div>