How to set page parameters in uniapp

With the rapid development of mobile application development, more and more developers are now using uniapp to quickly build cross-platform applications. However, when we create a page, sometimes we need to pass parameters to the page, and these parameters may be passed from other pages. So, how does uniapp set page parameters? This article will introduce in detail how to set page parameters in uniapp.

1. Passing parameters through URL

We can pass parameters through URL, which is a very common way. In uniapp, we can use routing jumps to achieve this. We can first set the parameters that need to be passed in the original page:

uni.navigateTo({
  url: '/pages/target/target?id=1&name=uniapp'
})

When jumping to the target page, we can carry data through the query parameter of the url. In the target page, we can get the parameters in the following ways:

export default {
  onLoad(options) {
    console.log(options.id) // 输出 1
    console.log(options.name) // 输出 uniapp
  }
}

Here we use the onLoad life cycle hook function to get the parameters. The onLoad function is a hook function that is triggered when the page is loaded and can obtain the parameters carried in the URL.

2. Passing parameters through global data

We can also pass parameters through global data. In uniapp, we can use vuex to manage global data. We can define a global variable in vuex to store the parameters that need to be passed, and then obtain the corresponding parameters in the target page.

First, define the parameters that need to be passed in the state of vuex:

const state = {
  userInfo: {
    id: 1,
    name: 'uniapp',
    age: 18
  }
}

Then in the original page, we can set the parameters in the following ways:

store.commit('setUserInfo', state.userInfo)

Here we use Use the commit function of vuex to update global data. setUserInfo is a mutation function used to update the value of userInfo.

In the target page, we can get the parameters in the following ways:

export default {
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    }
  }
}

Here we use computed properties to get the value of userInfo. $store is a global state management object provided by vuex and can be used directly in any component.

Summary

In uniapp, we can pass parameters through url and global data. Both methods have their own advantages and disadvantages. Passing parameters through URL can make our application more flexible, but the number of parameter types is limited; passing parameters through global data can reduce the coupling of the code, but it will take up more memory space. When using it, we need to choose the appropriate way to pass parameters according to the specific application scenario.

The above is an introduction to how uniapp sets page parameters. I hope it will be helpful to everyone.

The above is the detailed content of How to set page parameters in uniapp. For more information, please follow other related articles on the PHP Chinese website!