问题:微信限制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层路由对用户来说入口太深了~)