近期我们确定了 v3.6 版本的代号「Reach」,并发布了 v3.6-canary 版本,多个新特性在该版本内开放给社区各位开发者体验,欢迎大家试用并在社区中反馈相关问题。
一、支持路由库
Taro 3 适配前端 UI 框架的方式更接近于前端的本质,通过在小程序端模拟实现框架所需的 BOM/DOM API 来达成,对于适配各个路由库也是同样的思路。
1. 运行时引入 History & Location 对象
在 Web BOM 中,History & Location 对象是重要组成部分,它们是实现前端路由的关键。Taro 为了支持前端路由库的使用,在运行时中引入了 histroy
location
对象的实现,且尽可能与 Web 端规范对齐,你可以在 window
对象*问到 history
和 location
对象。同时,也支持监听 hashchange
和 popstate
事件,这为使用路由库提供技术基础。
// 统称: 页面路由状态
window.history
window.location
// 支持监听事件
window.addEventListener('hashchange', () => {})
window.addEventListener('popstate', () => {})
小程序天然支持多页面(pages
数组配置),因此 Taro 并非以整个应用为一个路由系统,而是顺应小程序规范以页面维度进行路由管理。每当切换页面时,会将当前页面的页面路由状态缓存。跳转至新页面后会重新创建页面路由状态,并挂载在 window
对象上。当返回上一级页面时,会将上一级页面的页面路由状态重新挂载到 window
对象中。
2. 使用路由库
至此,可以在小程序中使用成熟的前端路由库了,包括 react-router
和 vue-router
。在路由库中,诸如