Anim Router 路由增强

小程序提供一套基于页面栈的路由管理机制，Anim 则是基于此做了路由增强。

路由守卫

Anim Router 支持对路由进行拦截监听，提供了 beforeEach 与 afterEach 的路由钩子。

beforeEach

支持对路由进行拦截，以判断是否需要继续往下进行页面的跳转，或者重新跳到其他页面上。请必须严格检查逻辑中是否会导致无限重定向的问题。

// app.js
import Anim from '@ssv-lab/anim'

Anim.interceptors.router({
	beforeEach(to, from) {
    console.log(to, from)
    // 返回 false 或者 Promise<false> 时，路由会被拦截
    if(permissionUrls.includes(to.url) && !userStore.isAuth) {
      wx.showToast({ title: '无权限' })
      return false
    }
    
    // 返回 { url: string } 的对象时，可以支持页面重定向
    if(redirectUrls.includes(to.url)) {
      return { url: '/pages/index/index' }
    }
    
    // 正常跳转
    return true
  }
})

afterEach

路由跳转完成后的钩子，用于一些特殊的场景。

// app.js
import Anim from '@ssv-lab/anim'

Anim.interceptors.router({
  afterEach: ((to, from, openType) => {
    console.log('after each', to, from, openType)
  })
})

注意：

当前的路由守卫的能力只支持了 navigateTo 与 redirectTo 两个方法。
beforeEach 逻辑不当会导致无限死循环，请严格检查逻辑。
路由跳转最好使用绝对路径（/pages/xxx/xxx），而不是相对路径（../../xxx/xxx）。

路由参数

路由参数当前需要自己序列化后才可以添加到路由路径后。为了提高开发者的效率，Anim 对 router 进行了能力的增强，拓展了 router 的能力，通过对路由增加 query 参数可以传入数据，Anim 会自动做相关的序列化。

增强方案

// /pages/index/index
Page({
  handleToPage() {
    // 相比手动拼接 query 参数得到了更方便的体验。
    // 支持嵌套路由，会被 JSON.stringify 序列化进行拼接。
    wx.navigateTo({
      url: '/pages/data/data',
      query: { 
        a: 1, 
        b: 2,
        c: {
          d: 'd',
          e: 'e',
          f: 'f'
        }
      }
    })
  }
})

获取参数的方法则并未发生变化

// /pages/data/data
Page({
  onLoad(query) {
    //
    console.log('获取 query', query)
  }
})

路由保护

请注意该方案仅是为了做保护，正确的做法应该是从产品层面进行业务深度的优化

小程序路由栈默认最多为 10 个，超过后路由跳转将无法正常完成，会导致业务无法正常执行。Anim 通过对路由栈进行检查，对 10 层限制进行相应的保护。

javascript

// /pages/index/index
Anim.Page({
  handleToPage() {
  	// 超过十层后，会自动更新为 redirectTo 保证业务可持续进行。
    wx.navigateTo({
      url: '/pages/data/data',
      query: { a, b }
    })
  }
})

规则如下：

当页面小于 10 层时，正常执行路由跳转。
当页面大于 10 层时，会使用 redirect 代替 navigateTo 进行路由跳转，保证业务可正常执行。
当超过 10 层后，请注意回退页面仍然为原来的第 9 层，可能与正常逻辑逻辑不一致。

Anim Router 路由增强 #

路由守卫 #

beforeEach #

afterEach #

注意： #

路由参数 #

路由保护 #