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

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

在小程序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/news/354634.html

相关文章:

  • 基于SpringBoot+Vue+uniapp微信小程序的乡村政务服务系统的详细设计和实现(源码+lw+部署文档+讲解等)
  • AI学习指南深度学习篇-生成对抗网络的变体及扩展
  • 02 go语言(golang) - 包和模块
  • 什么是 SQL 命令?SQL 如何工作?
  • Maven基于构建阶段分析多余的依赖
  • Linux 下find常用命令整理(更新ing)
  • HCIP-HarmonyOS Application Developer 习题(十二)
  • 阿加犀构建开发者生态的全链路赋能之旅
  • QGIS--DEMTO3D
  • Pytorch分布式训练杂记1
  • DS链式二叉树的基本操作和OJ题(12)
  • mysql数据同步ES方案---DTS
  • 鸿蒙开发 四十四 ArkTs BuilderParam传递UI(二)
  • 开发一个微信小程序要多少钱?
  • Selenium 中定位元素操作集合
  • 面试经典150题刷题记录
  • 代码随想录算法训练营Day28
  • electron-vite_6js-cookie失效
  • react+video:限制快进、倍速、画中画
  • el-table中实现可选表格区域的鼠标事件检测