美文网首页
taro如何获取路径传参

taro如何获取路径传参

作者: w晚风 | 来源:发表于2021-05-22 11:15 被阅读0次

1.首先进行页面跳转传递参数

    // 跳转到目的页面,打开新页面
    Taro.navigateTo({
      url:'/pages/details/index?id=1'
    })

2. 页面接收参数

例子:
类组件

import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import { getCurrentInstance } from '@tarojs/taro'

export default class Index extends Component {
  $instance = getCurrentInstance()

  componentDidMount () { 
    console.log(this.$instance.router.params) // 页面参数获取
  }

  render () {
    return (
      <View className='index'>
        <Text>详情页面</Text>
      </View>
    )
  }
}

函数式组件

import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
import { getCurrentInstance } from '@tarojs/taro'

function Index(){
  const [userName ,setUserName] = useState('Hello World!!!!')

  const { router } = getCurrentInstance();
  console.log(router.params) // 参数接收

  return ( 
    <View>
        <Text>{userName}</Text>
    </View>
  )
}

export default Index

在控制台打印都是Ok的,写的相对简单,供自己下回查阅

相关文章

网友评论

      本文标题:taro如何获取路径传参

      本文链接:https://www.haomeiwen.com/subject/uuunjltx.html