HBuilderX（uni-app）Vue3路由传参和接收路由参数！！

uni-app搭建小程序时候Vue3语法接收路由参数，去官方文档查看，是onLoad的option接收参数，我试过，接收不到，上网查各种方法也是不太行，最后自己琢磨出来了，这参数藏得还挺深！！

一、路由携带参数

二、另一个页面接收传递的参数

1、引入getCurrentInstance

[2、打印getCurrentInstance().proxy. $scope](#2、打印getCurrentInstance().proxy.$ scope)

[3、传过来的参数id就在getCurrentInstance().proxy. $scope.options.id](#3、传过来的参数id就在getCurrentInstance().proxy.$ scope.options.id)

一、路由携带参数

这个比较简单，官方文档也有写。

官方路由传参文档：

uni.navigateTo(OBJECT) | uni-app官网

javascript 复制代码

const clickItem = (id) => {
  console.log("当前点击的商品下标是" + id);
  // UniApp页面跳转，携带参数
  uni.redirectTo({
    url: `/pages/shopdetail/shopdetail?id=${id}`
  });
};

二、另一个页面接收传递的参数

1、引入getCurrentInstance

getCurrentInstance() 返回的是当前组件的实例，它包含了很多关于组件的内部信息。你可以通过 instance.proxy 访问组件的公共属性。

javascript 复制代码

import { ref, onMounted,getCurrentInstance } from 'vue'; // 引入 Vue 的钩子
onMounted(async() => {
	const instance= getCurrentInstance()
	console.log('getCurrentInstance()',instance);
})

打印出来如下：

2、打印getCurrentInstance().proxy.$scope

javascript 复制代码

const instance= getCurrentInstance().proxy.$scope
	console.log('getCurrentInstance()',instance);

proxy是 getCurrentInstance() 返回对象中的一个属性，允许你访问组件的公开属性和方法，例如访问 this.$route、this.$emit 等。proxy 是访问这些实例属性的推荐方式。

uniapp和Vue3的区别：

在 Vue 3 中，$route 是由 Vue Router 提供的，用于访问当前路由的对象。在 UniApp 中，**$scope**是每个页面实例的上下文对象。这个对象包含了页面的各种信息，比如页面的路由参数、页面的状态、以及一些页面生命周期的钩子函数。

$route ：是 Vue Router 提供的，用于访问路由对象，通常在 Vue 3 中使用。
$scope ：是 UniApp 提供的，代表页面实例的上下文。你可以通过 proxy.$scope.options 来访问路由参数。

getCurrentInstance().proxy.$scope打印出来如下：

3、传过来的参数id就在getCurrentInstance().proxy.$scope.options.id

javascript 复制代码

const instance= getCurrentInstance().proxy.$scope.options.id
console.log('getCurrentInstance()',instance);

getCurrentInstance().proxy.$scope.options打印出来如下：

getCurrentInstance().proxy.$scope.options.id打印出来如下：

这小参数还挺能藏！！！！！试试携带多个参数：

也能获取到：