如何在 uni-app 中使用路由参数？

在 uni-app 中使用路由参数可以方便地在不同页面之间传递数据和进行交互。以下是详细的步骤和说明：

一、设置路由参数

1. 在页面跳转时，可以通过 uni.navigateTo 或其他跳转方法传递参数。例如：

   uni.navigateTo({
        
     url: '/pages/detail/detail?id=123&name=test'
   });
   
           
   
             
           
           
           
   
             
   
             AI 代码解读
           
         
         

二、获取路由参数

1. 在目标页面的 onLoad 生命周期函数中，可以获取到传递过来的路由参数。例如：

   export default {
        
     onLoad(options) {
        
       // 获取路由参数
       const id = options.id;
       const name = options.name;
     }
   };
   
           
   
             
           
           
           
   
             
   
             AI 代码解读
           
         
         

三、处理路由参数

1. 获取到路由参数后，可以根据具体需求进行处理，比如展示数据、执行相关操作等。

2. 可以在页面的逻辑中使用这些参数来动态渲染内容或进行其他业务处理。

四、注意事项

1. 确保参数的名称和传递时的一致，避免出现参数获取不到的情况。
2. 对于复杂的数据结构，可以考虑将参数进行序列化或编码后传递，在接收端进行解析。

五、示例代码

假设有两个页面，一个是 index 页面，另一个是 detail 页面。在 index 页面中设置路由参数并跳转到 detail 页面，在 detail 页面中获取并处理这些参数：

index.vue：

<template>
  <view>
    <button @click="navigateToDetail">跳转详情页</button>
  </view>
</template>

<script>
export default {
   
  methods: {
   
    navigateToDetail() {
   
      uni.navigateTo({
   
        url: '/pages/detail/detail?id=1&name=张三'
      });
    }
  }
};
</script>

        

          
        
        
        

          

          AI 代码解读
        
      
      

detail.vue：

<template>
  <view>
    <p>ID: {
   {
    id }}</p>
    <p>名字: {
   {
    name }}</p>
  </view>
</template>

<script>
export default {
   
  onLoad(options) {
   
    this.id = options.id;
    this.name = options.name;
  }
};
</script>

        

          
        
        
        

          

          AI 代码解读
        
      
      

通过以上步骤和示例，可以在 uni-app 中灵活使用路由参数，实现页面之间的数据传递和交互，提高应用的开发效率和用户体验。