【笔记】uniapp中，用vue3.x如何接收uni路由中的参数

最新推荐文章于 2025-03-20 09:00:00 发布

惘远

最新推荐文章于 2025-03-20 09:00:00 发布

阅读量6.4k

点赞数

分类专栏： uni-app 文章标签： vue uni-app

本文链接：https://blog.youkuaiyun.com/windysee/article/details/121572379

版权

uni-app 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在Vue 3.0环境下，如何利用setup生命周期钩子结合uni框架的路由参数，以实现更现代的组件状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在官方文档中只展示了vue2.x接收uni路由中参数的方式，但是对vue3.x没有过多的介绍，本篇展示了vue3.x如何接收uni路由中的参数

假设有路由/pages/user/index?userId=123，在vue2.x中是这样接收userId的

export default {
  data() {
    return {
      userId: ''
    }
  },
  onLoad(option) {
    this.userId = option.userId
  }
}

众所周知，在vue3.x中加入了setup，那在setup中要如何结合uni的生命周期函数来接收userId呢？

import { getCurrentInstance, onMounted } from 'vue'
export default {
  data() {
    return {
      userId: ''
    }
  },
  onLoad(option) {
    this.userId = option.userId
  },
  setup() {
    const curInstance = getCurrentInstance()
    onMounted(() => {
      // 通过curInstance来访问data中的userId
      console.log(curInstance.data.userId)
    })
  }
}