当前位置：首页 > article >正文

taro小程序如何全局监听路由变化？

article 2025/1/10 17:24:41

在小程序app.ts页，加入全局路由监听Taro.onAppRoute方法，如下

import { Component } from 'react';
import Taro from '@tarojs/taro';

class App extends Component {
  taroGlobalData = {
    previousRouteInfo: {}
  };

  // 对应 onLaunch
  async onLaunch() {
    // 路由变化时，会触发此方法
    (Taro as any).onAppRoute(() => {
      // 获取当前路由路径以及路由参数
      const currentPages = Taro.getCurrentPages();
      const { route, options } = currentPages[currentPages.length - 1];
      console.log('路由变化获取当前path和入参:', route, options)
      console.log('路由变化获取【上一个】path和入参:', this.taroGlobalData.previousRouteInfo)
      this.taroGlobalData.previousRouteInfo = currentPages[currentPages.length - 1]
    })
  }
 
  render() {
    return this.props.children;
  }
}

export default App;

注意：
1、onAppRoute不能放在componentDidShow方法里监听，因为这样会导致小程序切后台再切前台时，重复监听，也就是重复执行了监听事件，所以这里是放在onLaunch生命周期里
2、路由路径以及入参没有直接取onAppRoute方法的第一个参数是因为，onAppRoute方法在微信基础版本3.5.5以下版本时，参数返回有点问题（经观察是路由参数会缺失）

查看全文

http://www.kler.cn/a/354634.html