微信小程序中 模拟路由拦截实现 beforeEach

217 阅读1分钟

整体实现思路:

微信小程序中 实现想vue中 一样的 router.beforEach()函数, 实现路由拦截, 基础示例代码如下: 
// 定义router 类, 每次 路由操作时 都要先执行 beforeEachlim
class Router {
  constructor() {
    this.callback = () => {}
  }

  // 在执行forEach时, 只是将 将于逻辑 传递给路由对象 , 在后续执行 各种路由操作(push, replace, back...), 才使用这段逻辑 
  beforeEach(callback) {
    callback && (this.callback = callback);
  }

  // 跳转
  push(to) {
    this.callback('navigateTo', to)
  }

  // 重定向
  redirectTo(to) {
    this.callback('redirectTo', to);
  }

  // 重新加载
  reLunch(to){
    this.callback('reLunch', to);
  }

}

let router = new Router();


router.beforeEach((type, to) =>{
  console.log(type, to);
  if (isLogin) {
    wx[type]({path:'/login'});
  }  else {
    wx[type]({...to});
  } 
})

// 路由操作
router.push('/home');
router.replace('/home');
router.back('/home');