Uniapp的路由传递数据和生命周期

路由传递数据：

1.参数传递

参数传递是最常见的一种路由传递数据的方式，它可以通过在路由跳转时将数据作为参数传递到目标页面中。

首先，在触发路由跳转时，我们可以使用uni.navigateTo或uni.redirectTo方法进行页面跳转，并通过传递参数来传递数据，例如：

// A页面
uni.navigateTo({
  url: '/pages/B/B?id=123&name=uniapp',
})

在B页面中，我们可以通过获取路由参数来获取传递的数据：

// B页面
onLoad(options) {
  console.log(options.id) // 123
  console.log(options.name) // uniapp
}

在实际开发中，我们还可以使用uni.getStorageSync和uni.setStorageSync方法来实现跨页面存储和获取数据。

2.事件总线

事件总线是一种通过事件来传递数据的机制，它适用于不同页面之间有多个数据需要传递的情况。

关于事件总线可以参考

在uniapp中，我们可以使用uni.$emit和uni.$on方法来分别触发和监听事件。首先，我们需要在App.vue中定义事件总线：

// App.vue
import Vue from 'vue'
Vue.prototype.$bus = new Vue()

 然后，在发送数据的页面中，我们可以使用uni.$emit方法触发一个事件：

 // A页面
this.$bus.$emit('eventName', data)

 在接收数据的页面中，我们可以使用uni.$on方法监听事件，并获取传递的数据：

// B页面
created() {
  this.$bus.$on('eventName', data => {
    console.log(data)
  })
}

需要注意的是，事件总线中发送和接收数据的组件必须是同一个Vue实例，因此需要在App.vue中定义事件总线。

3.vuex状态管理

vuex是一种专门用于管理状态的工具，它可以将数据集中管理并在不同页面之间共享。

在uniapp中，我们可以使用vuex来实现路由传递数据的功能。首先，我们需要在store中定义数据状态和相关操作：

// store/index.js
const state = {
  data: null
}
 
const mutations = {
  setData(state, data) {
    state.data = data
  }
}
 
const actions = {
  setData({ commit }, data) {
    commit('setData', data)
  }
}
 
export default new Vuex.Store({
  state,
  mutations,
  actions
})

然后，在发送数据的页面中，我们可以使用vuex中的actions方法来设置state中的数据：

// A页面
this.$store.dispatch('setData', data)

 在接收数据的页面中，我们可以通过vuex中的state来获取数据：

// B页面
computed: {
  data() {
    return this.$store.state.data
  }
}

需要注意的是，使用vuex需要先安装vuex依赖包，并在main.js中引入和注册vuex：

// main.js
import Vue from 'vue'
import Vuex from 'vuex'
import store from './store/index'
 
Vue.use(Vuex)
 
const app = new Vue({
  store,
  // ...
})
app.$mount() 

4.总结

在uniapp中，路由传递数据有多种方式可供选择，不同的方式适用于不同的场景。参数传递适用于简单数据的传递，事件总线适用于多个组件之间的数据传递，而vuex则适用于大规模数据的集中管理和共享。开发者可以根据自己的实际情况来选择最适合的方式。

生命周期：

1.应用生命周期函数：
onLaunch: 应用初始化时触发，全局只触发一次。
onShow: 应用启动或从后台进入前台时触发。
onHide: 应用从前台进入后台时触发。
onError: 应用发生脚本错误或 API 调用失败时触发。
2.页面生命周期函数：
onLoad: 页面加载时触发。
onShow: 页面显示时触发。
onHide: 页面隐藏时触发。
onUnload: 页面卸载时触发。
onReady: 页面初次渲染完成时触发。
onResize: 页面尺寸变化时触发。
onPullDownRefresh: 用户下拉刷新时触发。
onReachBottom: 页面上拉触底时触发。
onTabItemTap: 当前是 tab 页时，点击 tab 时触发。
3.组件生命周期函数：
created: 组件实例被创建时触发。
beforeMount: 组件挂载前触发。
mounted: 组件挂载后触发。
beforeDestroy: 组件销毁前触发。
destroyed: 组件销毁后触发。
beforeUpdate: 组件更新前触发。
updated: 组件更新后触发。
这些生命周期函数提供了不同阶段执行代码的机会，你可以在相应的生命周期函数中编写逻辑代码，进行初始化、数据加载、页面交互等操作。

需要注意的是，不同平台（如小程序、H5、App）对生命周期的支持和触发时机可能会有所差异，因此在开发过程中应仔细查阅相关文档并根据目标平台进行适配。

此外，UniApp 还提供了一些特定于平台的生命周期函数，用于处理特定平台的事件和行为，如小程序平台的 onShareAppMessage、H5 平台的 onPageScroll 等。你可以根据需要在文档中查找并使用这些特定平台的生命周期函数。

以下是 UniApp 中常用的生命周期函数的代码示例：

1.应用生命周期函数：

javascript

Copy

App({
  onLaunch(options) {
    // 应用初始化时触发，全局只触发一次
    console.log('App onLaunch');
  },
  onShow(options) {
    // 应用启动或从后台进入前台时触发
    console.log('App onShow');
  },
  onHide() {
    // 应用从前台进入后台时触发
    console.log('App onHide');
  },
  onError(error) {
    // 应用发生脚本错误或 API 调用失败时触发
    console.log('App onError', error);
  },
});

2.页面生命周期函数：

javascript

Copy

 export default {
  onLoad(options) {
    // 页面加载时触发
    console.log('Page onLoad', options);
  },
  onShow() {
    // 页面显示时触发
    console.log('Page onShow');
  },
  onHide() {
    // 页面隐藏时触发
    console.log('Page onHide');
  },
  onUnload() {
    // 页面卸载时触发
    console.log('Page onUnload');
  },
  onReady() {
    // 页面初次渲染完成时触发
    console.log('Page onReady');
  },
  onResize() {
    // 页面尺寸变化时触发
    console.log('Page onResize');
  },
  onPullDownRefresh() {
    // 用户下拉刷新时触发
    console.log('Page onPullDownRefresh');
  },
  onReachBottom() {
    // 页面上拉触底时触发
    console.log('Page onReachBottom');
  },
  onTabItemTap(item) {
    // 当前是 tab 页时，点击 tab 时触发
    console.log('Page onTabItemTap', item);
  },
};

 3.组件生命周期函数：

javascript

Copy

export default {
  created() {
    // 组件实例被创建时触发
    console.log('Component created');
  },
  beforeMount() {
    // 组件挂载前触发
    console.log('Component beforeMount');
  },
  mounted() {
    // 组件挂载后触发
    console.log('Component mounted');
  },
  beforeDestroy() {
    // 组件销毁前触发
    console.log('Component beforeDestroy');
  },
  destroyed() {
    // 组件销毁后触发
    console.log('Component destroyed');
  },
  beforeUpdate() {
    // 组件更新前触发
    console.log('Component beforeUpdate');
  },
  updated() {
    // 组件更新后触发
    console.log('Component updated');
  },
};

这些是 UniApp 中常用的生命周期函数的代码示例。你可以根据需要在相应的生命周期函数中编写逻辑代码，处理初始化、数据加载、页面交互等操作。