评论

小程序突破10层路由方案

小程序无限层级路由方案

问题:微信限制10层内的路由跳转 10以后报错 需要使用redirectTo跳转

先前条件:使用这套解决方案需要项目中所有跳转页面的地方调同一个方法

解决方案:添加一个中转页面,由开发者维护一套虚拟路由栈数据,当跳转页面路由到第十层时需要把第9层重定向到中转页,再由中转页跳转到10层

方案细节:

  • 9层(含9层)以内路由:走小程序自己的历史栈就,跳转时候更新一下自己维护的路由栈
  • 从9层跳转10层:需要把第9层重定向到中转页,再由中转页跳转到10层
  • 10层以后跳转:在navigateTo方法中处理,到10层之后,再跳转就第10层页面一直做redirectTo操作了
  • 10层以上返回:先返回到中转页,根据自己维护的虚拟路由栈判断具体返回到哪个页面,然后navigateTo过去
  • 从10层返回到9层:返回到中转页,将中转页redirectTo到第9层页面
  • 9层内的返回:使用小程序自己的返回

更新虚拟栈节点

// 虚拟栈操作
    switch (type) {
      case 'navigateTo':
        $history.push(target);
        break;
      case 'redirectTo':
        if (originType === 'navigateTo') $history.push(target);
        else $history.replace(target);
        break;
      case 'switchTab':
        $history.reset(target);
        break;
      case 'reLaunch':
        $history.reset(target);
        break;
      default:
        break;
    }


方案缺点:虽然突破了10层路由的限制但是10层之后的跳转会有中转页闪一下,返回也要重新走一遍小程序生命周期。(如果你的项目超过了10层路由先看能不能从产品角度优化掉毕竟10层路由对用户来说入口太深了~)

最后一次编辑于  2022-11-07  
点赞 3
收藏
评论
登录 后发表内容