How to jump to get parameters in uniapp

1. Introduction to uniapp

uniapp is a tool for developing cross-platform applications. It uses the vue.js development framework, WebStorm IDE and HBuilderX integrated development environment to support the development of WeChat applets, Alipay applets, Baidu Mini Program, Toutiao Mini Program, H5, App and other applications.

2. uniapp jump page

In uniapp, page jumps are performed through routing. The basic building blocks of routing include paths and parameters. Among them, the path is used to specify the page path to jump to, and the parameters are some additional information, such as id, name, etc.

In uniapp, we use the uni.navigateTo() function to complete the page jump operation. The specific implementation steps are as follows:

1. Define a button or link. When the button or link is clicked, the jump operation will be performed;

<button @click="toDetail">跳转到详情页</button>

2. In the toDetail method, call uni .navigateTo() function, pass in the page path that needs to be jumped as a parameter;

toDetail() {
   uni.navigateTo({
        url:'./detail?id=1'
   })
}

3. In the page to be jumped to, get the passed parameters through this.$route.query.id.

<template>
   <div>
      <p>获取到的参数为：{{id}}</p>
   </div>
</template>
<script>
   export default {
      data() {
         return {
            id: ''
         }
      },
      onLoad() {
         this.id = this.$route.query.id;
      }
   }
</script>

3. How uniapp obtains page parameters

There are two main ways to obtain page parameters in uniapp: query and params. In the previous example, we used query to pass and obtain parameters.

1. query parameters

query parameters are parameters in the url. After the jump is completed through the uni.navigateTo() function, the parameters will be spliced ​​to the url of the target page. , such as: ./detail?id=1. In the target page, the passed parameters can be obtained through this.$route.query.

<template>
   <div>
      <p>获取到的参数为：{{id}}</p>
   </div>
</template>
<script>
   export default {
      data() {
         return {
            id: ''
         }
      },
      onLoad() {
         this.id = this.$route.query.id;
      }
   }
</script>

2. params parameter

The params parameter is the parameter passed through the routing object. It is passed through the second parameter of the uni.navigateTo() function when jumping to the page. . In the target page, the passed parameters can be obtained through this.$route.params.

toDetail() {
   uni.navigateTo({
        url:'./detail',
        params: {
            id: 1
        }
   })
}

<template>
   <div>
      <p>获取到的参数为：{{id}}</p>
   </div>
</template>
<script>
   export default {
      data() {
         return {
            id: ''
         }
      },
      onLoad() {
         this.id = this.$route.params.id;
      }
   }
</script>

Summary

Through the introduction of this article, we understand the basic way uniapp performs page jumps and how to obtain page parameters. In actual projects, it is necessary to choose the appropriate method to transfer and obtain parameters according to specific business needs. By learning and mastering these basic knowledge, we can better develop uniapp, improve development efficiency, and provide users with a better application experience.

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