巴西地区（小程序无限层级路由方案（无框架依赖））

背景

小程序历史栈最多只支持10层当小程序业务比较复杂时，就很容易超过10层。当超过10层后，有的机型是点击无反应，有的机型会出现一些未知错误

为了解决这些问题，我们引入了无限层级路由方案。

方案

首先声明一下，最初方案并不是我提出的，是我司内部一位清华学霸提出的。但他们是基于wepy框架做的处理，由于我们用的是mpvue，所以对这个方案上做了修改，同时不依赖于框架。

虽然是改造版，但原理是一样的，下面我来介绍一下修改后的方案。

几个关键点：

9层（含9层）以内时：走小程序自己的历史栈就ok了，跳转时候更新一下逻辑栈，这没啥可说的从9层跳转10层：需要把第9层重定向到中转页，再由中转页跳转到10层10层以后跳转：在 navigateTo 方法中处理，到10层之后，再跳转就第10层页面一直做 redirectTo（重定向）操作了10层以上返回：会返回到中转页，由中转页判断，具体返回到哪个页面，然后 navigateTo（跳转）过去从10层返回到9层：返回到中转页，将中转页redirectTo（重定向）到第9层页面9层内的返回：直接返回就好了，返回时候不会更新逻辑栈，但没有关系，因为只有中转页才会用到逻辑栈逻辑栈更新机制：跳转、返回中转页时更新navigateTo 时更新redirectTo 时更新reLaunch 时更新navigateBack 时更新

图示：

用户操作小程序历史栈js逻辑栈：自行维护的 js 路由栈中表示中转页12 34 56 78 9 A B C 表示不同的页面路径

到这里细心的读者可能已经发现：之前跳转操作和10层以上的返回操作都会更新逻辑栈，到了10层以内的返回操作就不会更新逻辑栈了。

原因：

这块也是我们对原有方案的主要改造点。因为到了10层以内，所有的返回和跳转都由微信系统历史栈接管了。我们只要保证用户在通过api进行跳转操作时更新就可以了。而且，自己维护的逻辑路由栈实际上只有中转页才会用到。

这样也就不用在每个页面都要注册 onUnload 钩子去实时更新返回时的路由信息了。把更新路由信息的逻辑都放到了api调用这一层。业务开发时完全不用关心。

示意代码

lib/navigator/Navigator.js (自己封装的跳转方法，History.js 代码省略了)

import History from @/lib/navigator/Historyconst MAXLEVEL =10//小程序支持打开的页面层数export default class Navigator {//中转页面路径 static curtainPage =/pages/curtain/curtain/main//最大页数 static maxLevel = MAXLEVEL //逻辑栈 static history = new History({ routes:[{ url:}], correctLevel: MAXLEVEL -2 }).../**打开新页面@param {Object} route 页面配置，格式同wx.navigateTo*/@makeMutex({ namespace: globalStore, mutexId:navigate})//避免跳转相关函数并发执行static async navigateTo (route){console.log([Navigator] navigateTo:, route)//更新逻辑栈Navigator.history.open({ url: route.url })let curPages = getCurrentPages()//小于倒数第二层时，直接打开if (curPages.length < MAXLEVEL -1){ await Navigator.secretOpen(route)//就是调用wx.navigateTo//倒数第二层打开最后一层} else if (curPages.length === MAXLEVEL -1){ const url = URL.setParam(Navigator.curtainPage,{ url: route.url }) await Navigator.secretReplace({ url })// wx.redirectTo 到中转页，再由中转页跳转到第10层页面//已经达到最大层数，直接最后一层重定向} else { await Navigator.secretReplace(route)// wx.redirectTo 第10层页面直接重定向}}/**完整历史记录@return {Array}*/static get history (){return Navigator.history.routes}/**更新路由@param {Object} config 自定义配置，可配置项参见 config 相关字段及注释*/static updateRoutes (routes =[]){this.history.routes = routes}...}

中转页代码/pages/curtain/curtain/index.vue

复制代码

原理就是这样，但是有几点需要注意：

业务代码中需要调用自己封装的跳转方法，切记不要直接调用 wx 的 api，也不要使用组件，这样是没法更新 js 逻辑栈的，正确跳转方式如： Navigator.navigateTo({ url:xxx})。跳转时要及时更新 js 逻辑栈（更新时机如上所述），因为这会直接影响中转页的跳转逻辑

这个方案最大的优点在于不用监听页面卸载时对逻辑栈的更新，无需在每个页面里加入更新逻辑栈代码。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。