uniapp怎么显示页面传递的参数-猿码集

uniapp怎么显示页面传递的参数？

在使用uniapp开发前端页面时，我们常常需要将页面之间传递的参数进行显示。这篇文章将介绍uniapp中如何显示页面传递的参数。

1. 基础参数传递

在uniapp中，可以使用`uni.navigateTo`或`uni.redirectTo`等API跳转到另一个页面，并且可以将数据通过参数传递。

比如在A页面中，通过`uni.navigateTo`跳转到B页面，并且传递参数`name`和`age`：


uni.navigateTo({
  url: '/pages/B/B?name=张三&age=18'
})

在B页面中，我们可以通过`this.$route.query`获取参数：


export default {
  created() {
    console.log(this.$route.query) // { name: '张三', age: '18' }
  }
}

可以通过模板字符串插值，将参数显示到页面中：


<template>
  <div>
    <span>${this.$route.query.name}</span><span>${this.$route.query.age}</span>
  </div>
</template>

使用`this.$route.query`获取的参数其实就是URL参数，也可以使用`this.$route.params`获取路由参数。

2. 使用Vuex状态管理

使用Vuex可以将状态数据集中管理，可以在多个组件中进行共享和传递。

在页面A中，可以通过`this.$store.commit`提交一个mutation，在mutation中修改status中的参数：


// store.js
const state = {
  name: '',
  age: 0
}
const mutations = {
  setName(state, name) {
    state.name = name
  },
  setAge(state, age) {
    state.age = age
  }
}
export default new Vuex.Store({
  state,
  mutations
})
// A.vue
export default {
  methods: {
    gotoB() {
      this.$store.commit('setName', '张三')
      this.$store.commit('setAge', 18)
      uni.navigateTo({
        url: '/pages/B/B'
      })
    }
  }
}

在页面B中，通过`this.$store.state`获取状态参数：


export default {
  computed: {
    name() {
      return this.$store.state.name
    },
    age() {
      return this.$store.state.age
    }
  }
}

使用computed计算属性，将状态参数显示到页面中：


<template>
  <div>
    <span>{{name}}</span><span>{{age}}</span>
  </div>
</template>

3. 使用LocalStorage进行本地缓存

如果需要在多个页面间进行数据共享，并且希望数据在关闭页面后仍然存在，可以使用LocalStorage进行本地缓存。

在页面A中，可以通过`uni.setStorageSync`将数据存储在本地，然后通过`uni.navigateTo`跳转到页面B：


uni.setStorageSync('name', '张三')
uni.setStorageSync('age', 18)
uni.navigateTo({
  url: '/pages/B/B'
})

在页面B中，在页面加载时通过`uni.getStorageSync`获取本地缓存数据：


export default {
  data() {
    return {
      name: '',
      age: 0
    }
  },
  onLoad() {
    this.name = uni.getStorageSync('name')
    this.age = uni.getStorageSync('age')
  }
}

然后将数据显示在页面中：


<template>
  <div>
    <span>{{name}}</span><span>{{age}}</span>
  </div>
</template>

4. 使用EventBus进行事件传递

在复杂的页面逻辑中，需要在多个组件间传递事件，可以使用EventBus进行事件传递。

在页面A中，我们可以创建一个全局事件总线，然后在跳转到页面B前通过`this.$eventBus.$emit`发布事件：


// main.js
Vue.prototype.$eventBus = new Vue()
// A.vue
this.$eventBus.$emit('data', {
  name: '张三',
  age: 18
})
uni.navigateTo({
  url: '/pages/B/B'
})

在页面B中，我们可以通过`this.$eventBus.$on`监听事件，然后获取传递的参数：


// B.vue
export default {
  data() {
    return {
      name: '',
      age: 0
    }
  },
  created() {
    this.$eventBus.$on('data', data => {
      this.name = data.name
      this.age = data.age
    })
  }
}

将数据显示在页面中：


<template>
  <div>
    <span>{{name}}</span><span>{{age}}</span>
  </div>
</template>

总结

通过这篇文章，我们了解了uniapp中如何显示页面传递的参数，包括基础参数传递、使用Vuex状态管理、使用LocalStorage进行本地缓存、使用EventBus进行事件传递等。

在实际开发中，我们根据实际需求选择不同的方式进行页面参数的传递和显示。

uniapp怎么显示页面传递的参数