最近在使用taro做h5和小程序,虽然也是用的vue,但是发现页面跳转,路由,事件绑定等很多东西都和以往不大一样。

今天记录一下路由传参。

假如从A页面携带订单号跳转到B页面

A页面:(传递参数)

Taro.navigateTo({ 
url: `/pages/afterSale/list/sendDetail/index?code=${code}`
})

B页面:(接收参数)

以往路由接参使用的是 this.$router.params,taro1/2升级到 taro 3 后使用 getCurrentInstance().router 替代 this.$router,getCurrentInstance 作为新 API 从 @tarojs/taro引入。

import { getCurrentInstance } from '@tarojs/taro'

// 单个参数
created() {
    this.code = getCurrentInstance().router.params.code
console.log(this.code); 
  },

// 多个参数
created() {
    this.code = getCurrentInstance().router.params.code
console.log(this.code); 
  },

多个参数时:

传参:

Taro.navigateTo({ 
url: `/pages/afterSale/list/sendDetail/index?id=2&type=test`
})

 接收参数:

import { getCurrentInstance } from '@tarojs/taro'
created() {
  this.obj = Taro.getCurrentInstance()
  },

mounted () {
// 获取路由参数
console.log(this.obj.router.params) // 输出 { id: 2, type: 'test' }
}

Logo

前往低代码交流专区

更多推荐