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

简介: 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) // 输出1
  console.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) // 输出1
  console.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) // 输出1
    console.log(data.name) // 输出uniapp
  })
}
相关文章
|
8天前
|
UED 开发者
ArkTS路由跳转与参数传递:深入理解与实践
在HarmonyOS应用开发中,ArkTS作为主要开发语言,其路由跳转和参数传递机制是实现页面间通信的关键。本文深入探讨了ArkTS中的路由跳转基础,包括页面跳转的方式(如pushUrl和replaceUrl)、参数传递的方法,以及如何在实际开发中应用这些知识,帮助开发者提升应用的用户体验和性能。
185 1
在路由守卫中使用箭头函数时,如何处理组件的生命周期钩子函数?
在路由守卫中使用箭头函数时,如何处理组件的生命周期钩子函数?
|
2月前
|
JavaScript 网络架构
路由传参及跳转方式
路由传参及跳转方式
|
6月前
|
网络架构
怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
|
6月前
|
JavaScript Go
路由跳转及路由传参
路由跳转及路由传参
31 1
|
6月前
|
JavaScript Go
Vue路由跳转及路由传参
Vue路由跳转及路由传参
|
6月前
|
小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
64 0
|
6月前
|
存储 小程序
小程序路由传参的方法?
小程序路由传参的方法?
112 0
|
6月前
跳转传参的方式
跳转传参的方式
24 0
|
6月前
|
JavaScript
vue路由获取菜单名称和路由跳转传参
vue路由获取菜单名称和路由跳转传参
69 0