当前位置: 首页 > news >正文

Uuiapp使用生命周期,路由跳转传参

Uniapp生命周期:

1. beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用。

2. created:在实例创建完成后被立即调用。

3. beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。

4. mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。

5. beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。

6. updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成之后调用。

7. beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。

8. destroyed:实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

路由跳转传参:

在uniapp中,可以使用uni.navigateTo或uni.redirectTo方法进行路由跳转,并且可以通过传递参数来实现页面之间的数据传递。

1. 通过url传参:

在跳转时,可以在url中添加参数,例如:

uni.navigateTo({url: '/pages/index/index?id=1&name=uniapp'
})

在接收页面中,可以通过this.$route.query获取参数,例如:

onLoad() {console.log(this.$route.query.id) // 输出1console.log(this.$route.query.name) // 输出uniapp
}

2. 通过query传参:

在跳转时,可以通过query参数传递数据,例如:

uni.navigateTo({url: '/pages/index/index',query: {id: 1,name: 'uniapp'}
})

在接收页面中,可以通过this.$mp.query获取参数,例如:

onLoad() {console.log(this.$mp.query.id) // 输出1console.log(this.$mp.query.name) // 输出uniapp
}

3. 通过事件总线传参:

在跳转时,可以通过事件总线传递数据,例如:

uni.navigateTo({url: '/pages/index/index'
})
uni.$emit('event', {id: 1,name: 'uniapp'
})

在接收页面中,可以通过事件总线监听事件获取参数,例如:

onLoad() {uni.$on('event', (data) => {console.log(data.id) // 输出1console.log(data.name) // 输出uniapp})
}

http://www.lryc.cn/news/90354.html

相关文章:

  • 定积分的计算(牛顿-莱布尼茨公式)习题
  • leak 记录今天的一个小题
  • 软考A计划-试题模拟含答案解析-卷二
  • 【C++】pthread
  • 2023年前端面试题汇总-浏览器原理
  • react介绍,react语法,react高级特性,react编程技巧
  • Locust接口性能测试
  • Python类的特殊方法(通过故事来学习)
  • Vue.js 中的父子组件通信方式
  • Python之并发编程二多进程理论
  • 纯干货:数据库连接耗时慢原因排查
  • 【OneNet】| stm32+esp8266-01s—— OneNet初体验 | 平台注册及设备创建 | demo使用
  • 解决win无法删除多层嵌套文件夹
  • 用Vue简单开发一个学习界面
  • Oracle数据库从入门到精通系列之五:数据文件
  • 使用MockJS进行前端开发中的数据模拟
  • Ex-ChatGPT本地部署+Azure OpenAI接口配置+docker部署服务
  • 【收藏】FP独立站建站安心收款经验分享
  • python:绘制GAM非线性回归散点图和拟合曲线
  • 每日算法(第十四期)
  • uboot的使用
  • 学习HCIP的day.09
  • Electron-Builder Windows系统代码签名
  • 数据分析概述
  • 网络编程初识
  • 软考A计划-试题模拟含答案解析-卷十二
  • I.MX RT1170加密启动详解(1):Encrypted Boot image组成
  • Linux---用户切换命令(su命令、sudo命令、exit命令)
  • 手机图片怎么提取文字?高效渠道一览
  • Elasticsearch 聚合数据结果不精确问题解决方案