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