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);

proxygetCurrentInstance() 返回对象中的一个属性,允许你访问组件的公开属性和方法,例如访问 this.$routethis.$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打印出来如下:

这小参数还挺能藏!!!!!试试携带多个参数:

也能获取到:

相关推荐
00后程序员张7 分钟前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
小桥风满袖13 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心13 分钟前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~17 分钟前
CSS3的新特性
前端·javascript·css3
IT_陈寒23 分钟前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询39 分钟前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang42 分钟前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼1 小时前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥2 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript