Taro如何处理页面路由
为了多端统一的初衷，Taro在路由跳转的交互体验上，保持了小程序端和h5端的统一，即同一套代码，在h5和小程序端的跳转体验是一致的；如何理解Taro处理页面路由的方式，我们可以通过一个页面栈来表示路由的状态变化，Taro封装了多个路由API，每次调用路由API，都是对页面栈的一次进栈出栈操作：
Taro.navigateTo：保留当前页面，并跳转到应用内某个页面，相当于把新页面push进页面栈；Taro.redirectTo：关闭当前页面，并跳转到应用内某个页面，相当于用新的页面替换掉旧的页面；Taro.switchTab：跳转到tabBar页面，目前h5不支持；Taro.reLaunch：关闭所有页面，打开到应用内的某个页面，相当于清空页面栈，并且将新页面push进栈底；Taro.navigateBack：关闭当前页面，返回上一页面或多级页面，相当于将页面pop出页面栈；
可以通过下图更加直观表示上述API和页面栈的关系
在小程序端，Taro路由API将直接转换成调用原生路由API，也就是说，在微信小程序中，源代码中调用Taro.navigateTo，最终调用的是wx.navigateTo；而在H5端，Taro路由API将转换成调用window.history对象的API；
那在H5端如何管理页面栈和页面状态，以及页面切换后，如何加载和卸载页面(页面更新)等的问题，将由本文的主角taro-router进行处理；
页面栈的管理
众所周知，Taro H5端是一个单页应用，其路由系统基于浏览器的history路由（更多关于单页应用的路由原理，推荐看看这篇文章）；
这里我们要记住history API中的history.pushState、history.replaceState、history.go还有popstate事件这几个关键API，是整个路由系统的关键；
而基于history的单页应用一般面临着下面的问题：
- 单页应用内页面切换，怎么
处理状态并且如何更新页面； - 页面刷新后，如何恢复当前页面，而不是回到最开始的状态；
解决上述两个问题，taro-router内部实现一套页面管理机制，在内部管理一套页面状态，并且根据状态变更，决定页面的新增、替换、删除；在状态变更的同时，根据页面的url路径，决定需要更新的页面组件；更新的页面由页面栈负责管理，页面栈管理页面的层级关系；
在taro-router中，调用API进行页面跳转时，可以观察到Dom节点有如下的变化：
可以看到每个页面由<div class="taro_page"></div>节点包裹，而所有的页面节点<div class="taro_router"></div>节点包裹；在这里：
<div class="taro_page"></div>节点可以理解为页面栈，在taro-router中，对应着Router组件；<div class="taro_router"></div>节点可以理解为页面，在taro-router中，对应着Route组件，它的实际作用是包裹真正的页面组件；
Router会在taro-build的ENTRY文件解析阶段，通过AST解析，将组件插入到render函数中，插入口的代码类似（可以在.temp文件中查看）：
// 入口文件class App extends Taro.Component { render() { return <Router mode={"hash"} history={_taroHistory} routes={[{ path: '/pages/demo/index', componentLoader: () => import( /* webpackChunkName: "demo_index" */'./pages/demo/index'), isIndex: true }, { path: '/pages/index/index', componentLoader: () => import( /* webpackChunkName: "index_index" */'./pages/index/index'), isIndex: false }]} customRoutes={{}} />; }}在页面状态变化后，会通过taro-router中的TransitionManager通知Router组件去操作页面栈，TransitionManager类似观察者模式，Router组件属于它的订阅者，它的发布者在后面页面状态的管理会提及到；在Router组件内部，通过routeStack变量来管理页面栈，它通过一个数组来实现；
另外currentPages同样也是页面栈的另外一个实现，它的变化发生在页面栈中页面实例初始化后，通过collectComponents收集；这个变量是对外暴露的，使用方式类似小程序中的getCurrentPages，在Taro中则可以调用Taro.getCurrentPagesAPI；
Router组件当收到TransitionManager发布的事件后，根据其回调函数中的三个参数fromLocation, toLocation, action作进一步处理：
- fromLocation 表示从哪个路径跳转；
- toLocation 表示跳转到哪个路径；
- action 表示跳转的动作，包含
PUSH、POP、REPLACE；
根据返回的PUSH、POP、REPLACE动作类型，对页面栈routeStack进行页面的入栈、出栈、替换处理；
PUSH动作
当监听到的action为PUSH时：
- 首先会对
toLocation进行匹配，目的是为了找到对应的route对象，route对象包含path, componentLoader, isIndex等等的信息，其中componentLoader指向了要加载的页面组件； - 随后，会将匹配到的
route对象matchedRoute加入到routeStack中； - 最后通过调用
setState进行更新；
push (toLocation) { const routeStack= [...this.state.routeStack] const matchedRoute = this.computeMatch(toLocation) routeStack.forEach(v => { v.isRedirect = false }) routeStack.push(assign({}, matchedRoute, { key: toLocation.state.key, isRedirect: false })) this.setState({ routeStack, location: toLocation })}POP动作
当监听到的action为POP时：
- 首先，根据
fromLocation和toLocation的key值之差，决定在要页面栈中回退多少个页面； - 计算出的差值为
delta，再通过splice进行删除； - 删除操作完成后，检查页面栈的长度是否为0，若为0，则将
toLocation对应的页面推入页面栈； - 最后通过调用
setState进行更新；
pop (toLocation, fromLocation) { let routeStack = [...this.state.routeStack] const fromKey = Number(fromLocation.state.key) const toKey = Number(toLocation.state.key) const delta = toKey - fromKey routeStack.splice(delta) if (routeStack.length === 0) { // 不存在历史栈, 需要重新构造 const matchedRoute = this.computeMatch(toLocation) routeStack = [assign({}, matchedRoute, { key: toLocation.state.key, isRedirect: false })] } this.setState({ routeStack, location: toLocation })}REPLACE动作
当监听到的action为RELPLACE时：
- 首先会对
toLocation进行匹配，找到对应的route对象matchedRoute； - 删除页面栈栈顶的
route对象，替换为matchedRoute； - 最后通过调用
setState进行更新；
replace (toLocation) { const routeStack = [...this.state.routeStack] const matchedRoute = this.computeMatch(toLocation) // 替换 routeStack.splice(-1, 1, assign({}, matchedRoute, { key: toLocation.state.key, isRedirect: true })) this.setState({ routeStack, location: toLocation })}页面更新
在获知具体的页面栈动作之后，routeStack对象将会发生变化，routeStack的更新，也会触发Route组件数量的变化；
上文提及到，Route组件是具体页面的包裹
Router组件的render函数中，根据routeStack的大小，渲染对应的Route组件：
render () { const currentLocation = Taro._$router return ( <div className="taro_router" style={{ height: '100%' }}> {this.state.routeStack.map(({ path, componentLoader, isIndex, isTabBar, key, isRedirect }, k) => { return ( <Route path={path} currentLocation={currentLocation} componentLoader={componentLoader} isIndex={isIndex} key={key} k={k} isTabBar={isTabBar} isRedirect={isRedirect} collectComponent={this.collectComponent} /> ) })} </div> )}在Route组件实例初始化后，将会调用组件内updateComponent方法，进行具体页面的拉取：
updateComponent (props = this.props) { props.componentLoader() .then(({ default: component }) => { if (!component) { throw Error(`Received a falsy component for route "${props.path}". Forget to export it?`) } const WrappedComponent = createWrappedComponent(component) this.wrappedComponent = WrappedComponent this.forceUpdate() }).catch((e) => { console.error(e) })}是否记得在入口文件中插入的代码：
<Router mode={"hash"} history={_taroHistory} routes={[{ path: '/pages/demo/index', componentLoader: () => import( /* webpackChunkName: "demo_index" */'./pages/demo/index'), isIndex: true}, { path: '/pages/index/index', componentLoader: () => import( /* webpackChunkName: "index_index" */'./pages/index/index'), isIndex: false}]} customRoutes={{}} />;componentLoader字段传入的是一个dynamic import形式的函数，它的返回是一个Promise，这样就可以对应上updateComponent中props.componentLoader()的调用了，它的then回调中，表示这个dynamic import对应的模块已经成功加载，可以获取该模块导出的component了；获取导出的component后，经过包装再触发强制更新，进行渲染；
页面状态的管理
taro-router其内部维护一套页面状态，配合浏览器的historyAPI进行状态管理；内部实例化TransitionManager，用于当页面状态变化后，通知订阅者更新页面；
初始化流程
在taro-build的ENTRY文件解析阶段，会在app.jsx文件中插入taro-router的初始化代码：
const _taroHistory = createHistory({ mode: "hash", basename: "/", customRoutes: {}, firstPagePath: "/pages/demo/index"});mountApis({ "basename": "/", "customRoutes": {}}, _taroHistory);在初始化代码中，会首先调用createHistory方法，然后调用mountApi将路由API(如：navagateTo、redirectTo)挂载到Taro实例下；下面就讲一下createHistory方法的流程：
如果有看过history这个仓库的同学，应该会更容易理解taro-router初始化流程，因为初始化流程跟history的逻辑很像；
- 首先初始化
TransitionManager，用于实现发布者订阅者模式，通知页面进行更新； - 获取初始化的
history state，如果从window.history.state中能获取key，则使用该key，否则使用值为'0'的key值； - 将上一步初始化出来的
state通过window.history.replaceState进行历史记录的替换； - 监听
popstate事件，在回调函数中，对返回的state对象中的key值进行比较，通过比较得出需要进行的action，并将这个action通过TransitionManager通知到Router组件；
结合页面栈管理以及页面更新的逻辑，可以把整个taro-router的结构描述如下：
状态变化过程
taro-router维护的页面状态，保存内部的stateKey变量中，并且用于history对象的state中；
- 在首次进入单页应用时，
stateKey会被赋予初始值0； - 当每次进行
pushState时，会触发stateKey自增1； - 进行
replaceState时，stateKey保持不变； popstate触发时，回调函数会返回最新的stateKey，根据前后两次stateKey的比较，决定页面的action；
状态变化流程如下图：
注意：当业务代码中使用history api进行pushState，这个状态将不在taro-router内部维护的history状态中，甚至会影响到taro-router的逻辑；
例如：在业务代码中调用window.history.pushState插入一个状态：
class Index extends Taro.Component { componentDidMount() { window.history.pushState({ key: 'mock' }, null, window.location.href); }};假设在插入该状态前，history的state为{ key: '1' }；此时，用户触发返回操作，浏览器popstate事件被触发，这个时候，就会执行taro-router的handlePopState方法：
// 此处只保留关键代码const handlePopState = (e) => { const currentKey = Number(lastLocation.state.key) const nextKey = Number(state.key) let action: Action if (nextKey > currentKey) { action = 'PUSH' } else if (nextKey < currentKey) { action = 'POP' } else { action = 'REPLACE' } store.key = String(nextKey) setState({ action, location: nextLocation }) }在比较nextKey和currentKey时，就出现了1和mock的比较，从而导致不可预计的action值产生；
路由拦截的实现
路由拦截，是指在路由进行变化时，能够拦截路由变化前的动作，保持页面不变，并交由业务逻辑作进一步的判断，再决定是否进行页面的切换；
在Vue里面，我们比较熟悉的路由拦截API就有vue-router的beforeRouteLeave和beforeRouteEnter；在React当中，就有react-router-dom的Prompt组件；
文中一开始的时候，就提到Taro在路由跳转的交互体验上，保持了小程序端和h5端的统一，因此小程序中没有实现的路由拦截，H5端也没有实现；
那么，在taro-router中是否就真的不能做到路由拦截呢？答案是否定的，作者本人从vue-router和react-router-dom以及history中得到灵感，在taro-router是实现了路由拦截的APIbeforeRouteLeave，大家可以查看相关commit；
只有在页面中声明该拦截函数，页面才具有路由拦截功能，否则页面不具有拦截功能，该函数有三个参数分别为from，to，next
- from：表示从哪个Location离开
- to：表示要跳转到哪个Location
- next: 函数，其入参为boolean；next(true)，表示继续跳转下一个页面，next(false)表示路由跳转终止
它的使用方式是：
import Taro, { Component } from '@tarojs/taro'import { View, Button } from '@tarojs/components'export default class Index extends Component { beforeRouteLeave(from, to, next) { Taro.showModal({ title: '确定离开吗' }).then((res) => { if (res.confirm) { next(true); } if (res.cancel) { next(false); } }) } render () { return ( <View> <Button onClick={() => { Taro.navigateBack(); }}>返回</Button> </View> ) }}它的实现原理是借助TransitionManager中的confirmTransitionTo函数，在通知页面栈更新前，进行拦截；
// 此处只保留关键代码const handlePopState = (e) => { const currentKey = Number(lastLocation.state.key) const nextKey = Number(state.key) const nextLocation = getDOMLocation(state) let action: Action if (nextKey > currentKey) { action = 'PUSH' } else if (nextKey < currentKey) { action = 'POP' } else { action = 'REPLACE' } store.key = String(nextKey) // 拦截确认 transitionManager.confirmTransitionTo( nextLocation, action, (result, callback) => { getUserConfirmation(callback, lastLocation, nextLocation) }, ok => { if (ok) { // 通知页面更新 setState({ action, location: nextLocation }) } else { revertPop() } } )}拦截过程中，调用getUserConfirmation函数获取页面栈中栈顶的页面实例，并且从页面实例中获取beforeRouteLeave函数，调用它以获取是否继续执行路由拦截的结果；
function getUserConfirmation(next, fromLocation, toLocation) { // 获取栈顶的Route对象 const currentRoute = getCurrentRoute() || {} const leaveHook = currentRoute.beforeRouteLeave if (typeof leaveHook === 'function') { tryToCall(leaveHook, currentRoute, fromLocation, toLocation, next) } else { next(true) }}结语
至此，taro-router的原理已经分析完，虽然里面依然有不少细节没有提及，但是主要的思路和逻辑，已经梳理得差不多，因此篇幅较长；希望大家读完后，能有所收获，同时也希望大家如发现其中疏漏的地方能批评指正，谢谢！