当前位置: > > > Framewrok7 - 使用prerouter阻止路由器默认加载行为(跳到登录页为例)

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

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>
评论0