Detailed explanation of the method of routing parameters in uniapp

Uniapp is a cross-platform front-end development framework. Its biggest feature is that it can develop applications for multiple platforms at the same time. In Uniapp, routing parameter passing is a very common and important function. This article will introduce in detail the method of routing parameters in Uniapp, and provide specific code examples to help everyone better understand and apply it.

Routing parameters in Uniapp can be divided into two situations: jump from page A to page B and pass parameters to page B; page B receives the parameters and uses them.

1. Jump from page A to page B and pass parameters to page B

1. Pass parameters when jumping (pass parameters through URL)

In jump methods such as uni.navigateTo or uni.redirectTo, parameters can be passed to the target page through the URL. The code example is as follows:

uni.navigateTo({
  url: '/pages/b-page/b-page?id=1&name=uniapp',
  success: (res) => {
    console.log('跳转成功')
  }
})

In target page B, the passed parameters can be obtained by obtaining URL parameters. The code example is as follows:

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

2. Pass parameters when jumping (pass parameters through query)

In addition to passing parameters through the URL, Uniapp also provides another way to pass them Parameters, that is, passing parameters through query. The code example is as follows:

uni.navigateTo({
  url: '/pages/b-page/b-page',
  query: {
    id: 1,
    name: 'uniapp'
  },
  success: (res) => {
    console.log('跳转成功')
  }
})

In target page B, the passed parameters can be obtained by obtaining the query parameters. The code example is as follows:

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

2. Page B receives the parameters and uses

Whether the parameters are passed through the URL or through the query, the passed parameters can be obtained in the target page B. In target page B, it can be processed in the onLoad life cycle function or other places where parameters need to be used. The code example is as follows:

export default {
  onLoad(query) {
    console.log(query.id)   // 输出：1
    console.log(query.name) // 输出：uniapp
    // 接收到参数后，可以进行相应的逻辑处理
  }
}

In addition to receiving parameters in the life cycle function, you can also define a variable in the data attribute to receive and use parameters. The code example is as follows:

export default {
  data() {
    return {
      id: null,
      name: ''
    }
  },
  onLoad(query) {
    this.id = query.id
    this.name = query.name
    // 接收到参数后，可以进行相应的逻辑处理
  }
}

Through the above method, we can easily implement parameter transfer between pages in Uniapp. Whether passing parameters through URL or passing parameters through query, Uniapp provides a simple and flexible way to implement it, and is widely used in actual development. I hope the instructions and sample code in this article can help readers better understand and use the routing parameter passing function in Uniapp.

The above is the detailed content of Detailed explanation of the method of routing parameters in uniapp. For more information, please follow other related articles on the PHP Chinese website!