How to implement jump with parameters in uniapp routing

UniApp is a cross-platform development framework that supports writing code once and publishing it to multiple platforms at the same time. In UniApp, we often need to use the routing jump function to jump between different pages. Among them, jumping with parameters is a relatively common situation. This article will introduce UniApp routing with parameter jump.

1. Route jump

In UniApp, we implement route jump through the uni.navigateTo() function. This function can be used to jump from one page to another, such as jumping from the home page to the details page. The following is a basic jump example:

// index.vue
uni.navigateTo({
  url: '/pages/detail/detail'
})

In the above example, the jump path is specified through the url parameter. This path is a relative path starting with "/", which means jumping to the detail page in the pages directory.

2. Jump with parameters

When we need to transfer some data between pages, we need to use jump with parameters. For example, when jumping from the list page to the details page, you need to pass the ID of the currently selected item. In UniApp, parameters can be passed through the query parameter when using the uni.navigateTo() function. Here is an example of jumping with parameters:

// list.vue
uni.navigateTo({
  url: '/pages/detail/detail?id=' + item.id
})

In the above example, the parameters are passed by adding the query string in the url parameter. The query string starts with "?", followed by the parameter name and parameter value, and uses "&" to separate multiple parameters. For example, "id=1&name=Zhang San" means that two parameters, ID and name, are passed, and their values ​​are 1 and Zhang San respectively.

When receiving parameters, we can obtain the passed parameters through this.$route.query attribute. For example:

// detail.vue
console.log(this.$route.query.id) // 输出传递过来的ID参数的值

In the above example, the value of the ID parameter is obtained through this.$route.query.id and output to the console.

3. Summary

Jump with parameters is widely used in UniApp and can be used to pass various parameters and data. By using uni.navigateTo() and query parameters, we can easily implement page jumps with parameters. When we need to jump to a page when developing a UniApp application, we can refer to the above example and use the corresponding method to achieve it.

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