Vue3.2在uniapp中如何接受uni.navigateTo跳转时url上携带的参数

这个问题主要是昨天在进行路由跳转时 突然忘记了要如何接收到从 uni.navigateTo url 上携带的参数

function toMoreInfoPage() {
  console.log(flowList.value[index]._id)
  uni.navigateTo({
    url: `/pages/article/article?id=${flowList.value[index]._id}`,
  })
}

这个时候想在 article.vue 界面上接收到参数的话 之前使用的方法都是 getCUrrentInstance 这个api 然后再配合 onLoad 方法获取到这个参数 （ getCurrentInstance 方法可以获取当前组件实例，从而获取 route 和 router）

import { getCurrentInstance, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
.....
const currentInstance = getCurrentInstance()
const _id:String = ref('') 
onLoad((option) => {	//这里可以接收到一个参数option
  _id.value = option.id	
})

照理说这样子就可以接收到由上一个界面接收到的参数了 但是我那时候作死的 url 路径写错了 写成 /pages/article/article?id:${flowList.value[index]._id} 也就是 id后面的符号写错了 还是希望大家可以注意一下这个 所以后面误打误撞发现了一个更简单的接收到参数的方式 也就是使用 defineProps 方法 话不多说 直接上代码⬇️

import { ref } from 'vue'
.....
const props = defineProps<{
  id: String
}>()
const _id:String = ref('')
_id.value = props.id		//直接就获取到了

这样看是不是方便了很多 主要是 defineProps 这个方法不用引入就可以直接使用了 像第一种方法的话还要引入 getCurrentInstance 和 onLoad 方法

喜欢的话给我点个赞8～