笔记大全

uniapp跳转带回数据

更新时间：2023-09-29

1. 使用路由跳转并传递数据

Uniapp提供了uni.navigateTo和uni.navigateBack方法用于路由跳转和返回上一页，通过query参数可以传递数据。

// 跳转到目标页面，并传递数据
uni.navigateTo({
  url: 'pages/targetPage?data=' + JSON.stringify(data)
});

// 在目标页面，通过$route.query获取传递的数据
console.log(this.$route.query.data);

2. 使用Vuex进行全局状态管理

如果要在多个页面之间传递数据，可以使用Vuex进行全局状态管理，从而实现数据的跨页面传递。

// 定义一个全局的store
// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    data: null
  },
  mutations: {
    setData(state, data) {
      state.data = data
    }
  }
})

export default store

// 在需要传递数据的页面，调用mutation方法设置数据
// sourcePage.vue
export default {
  methods: {
    navigateToTargetPage() {
      const data = { name: '张三', age: 18 }
      this.$store.commit('setData', data)
      uni.navigateTo({
        url: 'pages/targetPage'
      })
    }
  }
}

// 在目标页面，通过$store.state获取数据
// targetPage.vue
export default {
  computed: {
    data() {
      return this.$store.state.data
    }
  }
}

3. 使用uniapp插件进行数据传递

Uniapp提供了vue插件机制，可以开发和使用插件来实现数据传递。比如可以创建一个名为'routerData'的插件，在其中定义一个$routerData对象来保存数据，并提供getData和setData方法进行数据获取和设置。

// routerData.js (插件)
export default {
  install(Vue) {
    Vue.prototype.$routerData = {
      data: null,
      getData() {
        return this.data
      },
      setData(data) {
        this.data = data
      }
    }
  }
}

// 将插件注册到Vue实例中
// main.js
import routerData from 'path/to/routerData.js'
Vue.use(routerData)

// 在需要传递数据的页面，调用$routerData的setData方法设置数据
// sourcePage.vue
export default {
  methods: {
    navigateToTargetPage() {
      const data = { name: '张三', age: 18 }
      this.$routerData.setData(data)
      uni.navigateTo({
        url: 'pages/targetPage'
      })
    }
  }
}

// 在目标页面，通过$routerData的getData方法获取数据
// targetPage.vue
export default {
  computed: {
    data() {
      return this.$routerData.getData()
    }
  }
}

总结：

Uniapp提供了多种方式来实现页面之间的数据传递。使用路由跳转时，可以通过query参数来传递数据，并在目标页面通过$route.query获取传递的数据。使用Vuex进行全局状态管理时，可以在全局store中定义一个数据对象，在需要传递数据的页面调用mutation方法设置数据，在目标页面通过$store.state获取数据。使用uniapp插件机制时，可以开发和使用插件来实现数据传递，定义一个对象保存数据，并提供获取和设置数据的方法。

c语言编程笔录