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

最新推荐文章于 2026-03-01 00:37:39 发布

原创最新推荐文章于 2026-03-01 00:37:39 发布 · 6.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #uni-app

uni-app 专栏收录该内容

1 篇文章

订阅专栏

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

在官方文档中只展示了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)
    })
  }
}